oops, no it didn't break the table, I did...never mind! On Tuesday, March 22, 2016 at 9:27:39 AM UTC-6, David Gifford wrote: > > <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/db21e9e4-c00e-4490-b839-374fbcba75cf%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
