CSS for tooltips?

#1

Hi everyone

I want to adjust the font-size and font-family for the tooltips that appear when hovering over a link.

I have this in a tiddler tagged $:/tags/Macro

\define tv-wikilink-tooltip()
<$transclude field="tooltip"><$transclude field="title"/></$transclude>
\end

I tried the following CSS in a Stylesheet tiddler to enlarge the font, but it didn’t work. Is there a different class for that?

html body.tc-body .tooltip .tooltiptext {
font-size:2em;
font-family:'Source Sans Pro', 'Arial', sans-serif;
}
#2

This doesnt work because the tooltip that you get when you hover a link is produced by the title attribute of the link:

image

And this native tooltip can’t (as far as I know) be styled(edit: with css alone).

It’s not really recommended to use the title attribute for tooltip anyway, because assistive reader can’t access it.

Here’s an article on how to create inclusive tooltip, if I got the time I’ll try to do a macro from this and will update this comment. Tooltips & Toggletips See also Perfect Tooltips With CSS Clipping and Masking | CSS-Tricks - CSS-Tricks

However, it IS possible to get the value of the title attribute with the attr() CSS function, then affect it to the content of a :after or :before pseudo-element.

E.g.:

<style>
a[title]{
position:relative;
}

a[title]:hover:after{
content:attr(title);
position:absolute;
left:0;
right:0;
text-align:center;
bottom:100%;
font-size:2em;
}
</style>

<a href="" title="tooltip">this link has a tooltip</a>

However, the original tooltip will show up too, so to prevent that you will need to use another attribute than title. But then you wont be able to use the tv-wikilink-tooltip variable…

You could disable the tooltip by using pointer-events:none; , but the link wont be clickable anymore.

A hack to hide the tooltip is to use an element inside the link that has an empty title attribute, like this:

<a href="https://codepen.io/jmcclure/pen/MYZgGY" title="Title to Hide">
<span title="">Hover me !</span>
</a>

So you could do this :

\define tv-wikilink-tooltip()
<$transclude field="tooltip"><$transclude field="title"/></$transclude>
\end

<style>
a[title]{
position:relative;
display: inline-grid;
place-items: center;
}

a[title]:hover:after{
content:attr(title);
position:absolute;
bottom:100%;
font-size:1em;
pointer-events:none;
color:<<color background>>;
background:<<color foreground>>;
padding:.5ch;
}
</style>

<a href="" title="tooltip"><span title="">this link has a custom tooltip</span></a>

OR

<$link to="Custom tooltip"><span title="">this link has a custom tooltip</span></$link>

image

https://demos.tiddlyhost.com/#Custom%20tooltip

But a more robust answer would be to use a button with aria attribute (see the article on accessibility component mentioned above)

EDIT: updated the demo to add a triangle to the tooltip:

image

2 Likes
#3

Thanks Telumire! I will give that a try.

#4

It can be done (for Firefox at least, maybe Chrome browsers too?) but it involves overriding settings in the prefs.js (found in the profile folder) with a file called user.js.

Downside is, of course, only you can see the changes.

More here: Prefs.js file - MozillaZine Knowledge Base

#5

If JS is fine then @DaveGifford you could override the link widget or the a element with a custom web component, but I guess that it’s not easy to do. It will be much easier to override the link widget once the parameterised-transclusions release will be finalised, in the next big tiddlywiki update.

#6

Thank you @telumire and @CodaCoder for your replies.

I went in a different direction for this. I have a macro, a stylesheet, an editortoolbar button, and a way to edit the button from the sidebar.

I hover over an @ symbol and it shows me the source of a note. Works when exporitng to static, too.

Macro:

\define src(words:"") <span class="tooltip">@<span class="tooltiptext">$words$</span></span>

Editor toolbar button:

<$action-sendmessage
    $message="tm-edit-text-operation"
    $param="wrap-selection"
    prefix="""<<src 'The Modern Mind (Watson)'>>"""
    suffix=""""""
/>

Stylesheet:

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
color:#ccc;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #eee;
  width: 400px;
  color: #000;
  text-align: left;
  padding: 5px;
padding-left:10px;
border:2px solid #bbb;
left:150%;bottom:100%;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 10;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}