On Sunday, August 8, 2021 at 6:42:37 PM UTC-7 TW Tones wrote:
> Knowing this I found How to change the style of the title attribute
> inside an anchor tag?
> <https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag>
> The title attribute is a Global attribute
> <https://www.w3schools.com/tags/att_title.asp>
>
That's a really neat bit of tech! Here's a slightly fancier version that
works for any text (not just links).
It also bypasses the default tooltip display, adds a bit more styling, and
gets the tip content from another tiddler!
In a tiddler tagged with $:/tags/Stylesheet:
.customtip { position: relative; }
.customtip:hover::after {
content: attr(mytip);
position: absolute; top: 100%; left: 50%;
white-space:nowrap; color:black; background:ivory;
padding:0 1em; border:1px solid black; border-radius:0.5em;
}
Then, in a test tiddler:
text before
<span class="customtip" mytip={{myTipText}}> Hover over me </span>
text after
And, in a separate tiddler, put some custom tip content:
TiddlyWiki is magic!
Notes:
* Instead of using an "A" (link) element, I used a <span> with a classname
of "customtip"
* The .customtip class doesn't need display:inline-block or margin-top:20px
* The CSS for ".customtip:hover::after" references a custom attribute name,
"mytip"
* The test defines the customtip span with an attribute named "mytip" that
transcludes content from the "myTipText" tiddler
enjoy,
-e
--
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/899cd036-bac9-425f-a082-1182be167a6dn%40googlegroups.com.
