CSS for tooltips in link widget?

[David Gifford]

Hi all

I am using tooltips and would like to adjust the font size and background color. Could someone give me the CSS class for that?

Here is a link to what I am working on. It is still unfinished. The hover toolitp works for the two bubbles for chapter 1. http://giffmex.org/experiments/matthew.bubbles.html#Matthew%20bubblemap

Blessings,

Dave

[c pa]

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]]

\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;
}

[David Gifford]

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

[David Gifford]

<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

[David Gifford]

oops, no it didn't break the table, I did...never mind!

[David Gifford]

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

[c pa]

Hey that's awesome. Glad to have been of help.