Word definition popups...

[Matt4]

Sorry if this has been shared before but I just came across something that I think is pretty useful.

I was creating a wiki that had some terms in it that I don't use everyday and I would stumble over the definition while I was reading the article. I wanted a way to access the definitions without having to go to another tiddler to do so. So what I did was make a macro, a data tiddler, and a little CSS to make a popup of the definition show over whatever word I choose.

Macro
\define def(word)
<abbr title={{Definitions##$word$}}>$word$</abbr>
\end

Definitions Tiddler
syllogism:an instance of a form of reasoning in which a conclusion is drawn from two given or assumed propositions (premises)
ontological:relating to or ''based'' upon being or existence
emoting:responding to a challenge with emotion rather than good reasoning
Type: application/x-tiddler-dictionary

Now in a tiddler, I can just put something like this:
"This is a valid <<def "syllogism">>. If the premises are true, then the conclusion would be true as well."

In the article, the word syllogism will have a dotted underline (you can make the look anything you want via CSS) and when I hover my mouse over it, I get the definition of the word as entered in the Definitions tiddler.

This is very handy depending on the type of wiki you are creating.

Again, if this was created by someone else, I apologize for not giving credit. I just can't remember where it came from.

[Mark]

Hi Matt,

This is quite handy.

Can you also share the "CSS used to make a popup of the definition show over whatever word you choose"?

Thanks!

Mark

[Matt4]

Well, you got me thinking...you can't really style the <abbr> tag. So I tweaked it a little and this one works and looks much better.

Change the macro to:
\define def(word)
<a href="#" class="def" data-tooltip={{Definitions##$word$}}>$word$</abbr>

\end

Now create a new tiddler with the tag $:/tags/Stylesheet that looks like this:

.def {
position:relative;
text-decoration: none;
border-bottom: 1px dotted #555;
color: #000;
}
.def a:hover {
position:relative;
}

a[data-tooltip]:hover:after {
  content: attr(data-tooltip);
font-size: 75%;
  padding: 4px 8px;
width: 200px;
overflow: auto;
  color: #333;
  position: absolute;
  left: 0;
  top: 200%;
  white-space: normal;
  z-index:999;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

I just grabbed this off the internet from kevin11189 (https://css-tricks.com/forums/topic/can-we-style-the-abbr-title-through-css/). I tweaked it a little and it isn't ideal but it works for an example.

Make the tiddler type text/css and save it.

Now when you use the macro you will get a nice tooltip with the definition under the mouse pointer. You can change the location and look be tweaking the CSS. IT works with Chrome and Firefox. I haven't tried it with anything else.

[Danielo Rodríguez]

Is this similar to this?

http://braintest.tiddlyspot.com/#PopupFootnotes

[Matt4]

Yes, very similar to that. Maybe that's where my idea came from? I thought the initial spark may have come from somewhere else (see original post)

It's a little different though and serves a different purpose I think. Imagine having 100 different words defined that could be used several times on any number of pages. Using my method you would just define them once, then put a simple macro around the word any time it's used and you're good to go. If the definition changes (your definition was unclear or you spell something wrong for example) you just change it once and it's changed everywhere. 

Your method is perfect for notes that are meant for one page (like footnotes of course) and having them show up as real footers so they display when you print is a great addition. My method wouldn't be any good for that sort of thing. And since yours is all contained in one tiddler, should something happen to other tiddlers your footnotes would still be in tact. Mine, if I accidentally delete the definition tidder, ALL the definitions are toast and good luck ever getting them all back.

I wonder if yours could be tweaked to allow the use of links to other websites within the footnote? That would be really cool for references to the sources of information.

Matt