Hi there, I would like to show definitions of words when they are clicked. For example, clicking on the word Mizuna would popup the definition “Japanese variety of lettuce”. I have stumbled upon the Dynannotate plugin and it seems like it can do this but I can’t really understand how to use it . Any help with this would be greatly appreciated, Matt
Modifying some examples for the Reveal widget I now have this:
<$reveal type="popup" state="$:/state/CoordinateSampleReveal">
<div class="tc-drop-down">
A kind of Japanese vegetable
</div>
</$reveal>
<$button popup="$:/state/CoordinateSampleReveal">mizuna</$button>
Is there a better way?
Thanks
M
Will all your definitions be stored in the tiddler where the word appears, or do you have a dictionary tiddler containing a list of all the words and definitions?
In either case, you should be able to significantly simplify the text you need to type by constructing a procedure that contains both the $button and its paired $reveal widget. If you want to type all your definitions inline (right after the word being defined) you could do something like this:
\procedure define(word, definition)
\function state() $:/state/CoordinateSampleReveal [<currentTiddler>] [<word>] +[join[/]]
<$button popup=<<state>> class="tc-btn-invisible tc-tiddlylink"><<word>></$button>
<$reveal type="popup" state=<<state>> >
<div class="tc-drop-down">
<<definition>>
</div>
</$reveal>
\end
<<define "mizuna" "A kind of Japanese vegetable">>
Note that in the <<define ...>>
syntax, the quotes around “mizuna” are optional unless it contains a space. The quotes around the definition are non-optional (unless it’s also a single word), and if the definition itself contains quotation marks, you’ll want to switch to triple quotes for the delimiter:
<<define mizuna """A kind of Japanese "vegetable".""">>
But if you foresee “mizuna” appearing more than once, and you want to use the same definition each time, it may make more sense to use a dictionary tiddler. Let’s say it’s called MyDictionary
; it will also need the type application/x-tiddler-dictionary
and a list of words and their definitions, with each line constituting a new pair:
mizuna: A kind of Japanese vegetable
taro: A root vegetable cultivated in Asia, Africa, and Oceania
This lets us adapt the procedure and the corresponding macrocall so that the definition is automatically retrieved from the dictionary tiddler:
\procedure define(word)
\function state() $:/state/CoordinateSampleReveal [<currentTiddler>] [<word>] +[join[/]]
<$button popup=<<state>> class="tc-btn-invisible tc-tiddlylink"><<word>></$button>
<$reveal type="popup" state=<<state>> >
<div class="tc-drop-down">
<$list filter="[[MyDictionary]getindex<word>]">{{!!title}}</$list>
</div>
</$reveal>
\end
<<define mizuna>>
<<define taro>>
There is obviously a lot happening here! If you’d like further clarification on any part(s) in particular, please let me know.
Finally — you may want to use the same <<define ...>>
procedure in more than one tiddler. If so, move your preferred procedure definition (everything from \procedure
to \end
) into a separate tiddler with the tag $:/tags/Global
. You can then use <<define ...>>
wherever you want, and all instances will use the same formatting and the same underlying logic.
I did something similar with Giffmex’s Transcluding tiddlers in popup windows —
The approach here is that the popups can be configured from the referenced tiddler’s field(s).
You can make the whole thing even tidier by wrapping the code into a \procedure so that you can simply call it with something like <$transclude $variable="proc_definition" word="word1"/>
Where proc_definition is your procedure containing Giffmex’s code
word is the parameter for the procedure
word1 is the tiddler that contains your definition, with the field word_def holding your definition.
The procedure would be something like:
\procedure proc_definition(word)
<div class="tooltip"><<word>><div class="tooltiptext"><$transclude tiddler=<<word>> field="word_def" mode="block"/></div></div>
\end proc_definition
I have not read the full details here, but was recently thinking of something similar, a couple of thoughts.
- What about mouse over - no need to click?
What if the author when writting used a small macro eg;
This is a sentence with the word <<i emergence>> and other words
This is a sentence with the word emergence⁽ⁱ⁾ and other words.
- It would perhaps first look for the name or phrase, eg emergence tiddler, then a tooltip/description field within that (tiddler-info) and then look into a data / dictionary tiddler
- The idea would be a small cascade that allows imediate definition but allow addtional details through tiddler creation etc… including hidden tiddlers like $:/words/emergence
- What if other references from links to online dictionaries and search engins and more are needed for the same word/or phrase, how do we make it extensible?
- The macro can be set to hide features or look different if needed for printing etc…
Speculation
Our utility macro here could be given an additional name/fieldname for example <<# emergence tooltip>>
(when not defaulting to description perhaps), In this case it will look in the emergence tiddler for the tooltip field, if not lookup “emergence” in the “tooltip” dictionary tiddler. Ie the dictionary tiddler has the same name as a fieldname.
- When in design mode clicking on the word would allow one to create the tiddler/or dictionary entry
- Editor toolbar buttons to support the use of this macro would also be productive.
- Imagin if this were a general rule, an attempt to find the tooltip field in a tiddler emergence, then falls back to the emergence key in the tooltip tiddler, perhaps even to the “default field” in the tooltip tiddler (message to add entry in tooltip tiddler).
How about when they’re hovered? For that, you can use the HTML ABBR element, in a decidedly low-tech manner:
We're having <abbr title="Japanese variety of lettuce">mizuna</abbr> tonight!
Which renders like this:
We’re having mizuna tonight!
You can style the element with basic CSS.
Thanks to everyone for so many high quality and varied answers, I think it will take me a while to decide on which approach to take.
Over the winter I would like to create a “word of the day” tiddler that picks a word and its’ corresponding definition from a data tiddler containing a selection of interesting/unusual words. I expect I will be posting again at some point as I am likely to get stuck somewhere along the way!
I also have several word lists stored in tiddlywiki and sometimes having a definition can be helpful, hence my original question.
Do search for a solution, this has being populare since tiddlywiki classic. Add message of the day, random tiddler and more to your search.
I have all but completed my aformentioned macro above, just ask if you want to see it.