In the end, I was able to do this <span class="tooltip"><span class="ltgray"><$link to="Matthew 1.1-17 - Jesus' genealogy">A</$link></span><span class="tooltiptext">Matthew 1.1-17 - Jesus' genealogy</span></span><span class="tooltip">
Result in the top two table rows here: http://giffmex.org/experiments/matthew.bubbles.html#Matthew%20bubblemap Thanks c pa for all your help! That was exactly the inspiration I needed! Dave On Tuesday, March 22, 2016 at 9:28:41 AM UTC-6, David Gifford wrote: > > 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/1db77964-399f-4a1d-9b54-e073d3df7466%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
