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.
On Saturday, May 2, 2015 at 11:13:54 AM UTC-7, Mark wrote:
>
> 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
>
>
> On Wednesday, April 29, 2015 at 9:45:59 AM UTC-7, Matt4 wrote:
>>
>> 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.
>>
>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/058b3a3f-7196-45d9-b874-09f32d574c6c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
