<span class="ltgray"><span class="tooltip"><$link to="Matthew 1.1-17"><div class="tooltip">A<span class="tooltiptext">Matthew 1.1-17 - Jesus' genealogy</span></div></$link></span>
works! But since it is inside a table it breaks the table. I may have to switch to an HTML table. Dave On Tuesday, March 22, 2016 at 9:19:37 AM UTC-6, David Gifford wrote: > > 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/0ab3c118-30ec-4514-9936-17dfbf77f739%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
