Wow, thank you for that, c pa! Thank you for taking the time for that. I will have to figure out how to make that work inside of a link. I have a page with a lot of these.
<span class="ltgray"><$link to="Matthew 1.1-17" tooltip="Matthew 1.1-17 - Jesus' genealogy">A</$link></span> Dave On Monday, March 21, 2016 at 9:34:08 PM UTC-6, c pa wrote: > > David, > > I looked into it. TiddlyWiki 5 converts the tooltip attribute into an html > title attribute. The title attribute can't be styled. So, to get the effect > you are looking for you'ld have to do some css trick like those shown on > the w3schools site here > > http://www.w3schools.com/css/css_tooltip.asp > > I created a demo here: > http://cpashow.tiddlyspot.com/#:[[Tooltip%20Stylesheet]]%20[[Tooltip%20Demo]] > <http://cpashow.tiddlyspot.com/#Tooltip%20Demo> > > \define tooltipspan(tooltip, text) > <span class="tooltip">$text$ > <span class="tooltiptext">$tooltip$</span> > </span> > \end > > <<tooltipspan "This is a tooltip" "I have a bunch of things to say!" >> > > > \define tooltipdiv(tooltip, text) > <div class="tooltip">$text$ > <span class="tooltiptext">$tooltip$</span> > </div> > \end > > with: stylesheet = > .tooltip { > position: relative; > display: inline-block; > border-bottom: 1px dotted black; > } > > .tooltip .tooltiptext { > visibility: hidden; > width: 120px; > background-color: black; > color: #fff; > text-align: center; > border-radius: 6px; > padding: 5px 0; > position: absolute; > z-index: 1; > bottom: 150%; > left: 50%; > margin-left: -60px; > } > > .tooltip .tooltiptext::after { > content: ""; > position: absolute; > top: 100%; > left: 50%; > margin-left: -5px; > border-width: 5px; > border-style: solid; > border-color: black transparent transparent transparent; > } > > .tooltip:hover .tooltiptext { > visibility: visible; > } > -- 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 post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/61a57194-0d03-48b5-8e7d-0c1da6f9508d%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
