Do we have Post its?

[Ste_W]

I’m sure there is a solution out there, but I’ve not had enough coffee yet…

I would like to pin a card/ post it note/ callout to a few tiddlers, preferably in the top right kind of area to get out of the way of the text, to provide a bit of info and a link to another tiddler. In this case to point from a definition to a worked example.
If it was visually distinct that would be a bonus.

Cheers in advance.

Stephen

[EricShulman]

Here’s a quick POC implementation of a “card/note”, using Cascades:

First, create a tiddler (e.g., “$:/config/ViewTemplateBodyFilters/note”)

• Tag it with $:/tags/ViewTemplateBodyFilter
• Set text field content to: [has[note]then[$:/custom/ui/ViewTemplate/body/note]]
• Add a field named list-before with a BLANK value

Next, create a tiddler (e.g., “$:/custom/ui/ViewTemplate/body/note”) containing text:

<div class="post-it"><$transclude field="note" mode="block"/></div>
<$transclude mode="block"/>

Next, create a tiddler (e.g., “$:/custom/ui/ViewTemplate/body/note/styles”) tagged with $:/tags/Stylesheet, containing:

.post-it   { float:right; display:inline-block; }
.post-it   { border:1px solid; border-radius:0.5em; padding:0.25em; }
.post-it p { margin:0; }

Note: you can adjust the 2nd “.post-it” style definition to apply whatever CSS you want to surround the post-it note.

Then, in any tiddler you want to display a post-it note, add a field named “note” containing whatever content you want (i.e, “a bit of info and a link to another tiddler”).

enjoy,
-e

[arunnbabu81]

Jeremy has done something similar in his work for AMBIT.

Xememex

[Ste_W]

@EricShulman

.post-it   { float:right; display:inline-block; }
.post-it   { {background-color: yellow; font-size: 0.8em;
width: 190px;
border-top: solid 1px black;
border-bottom: solid 2px black;
border-left: solid 2px black;
border-right: solid 2px black;
padding: 4px;
line-height: 1em;
} }
.post-it p { margin:0; }

Added some css for a more post-it look.

Thanks @EricShulman !