Less is more when it comes to tooltips

Meta dev
1

Following on from:

Notwithstanding the reservations expressed in the above article, tooltips do have their uses, especially when they are not the only option. But two problems need to be solved:

Position it so it doesn’t get clipped

This is weirdly hard in our case, since the anchor may appear anywhere horizontally on a line, the line may be of different lengths, and the note may be of different sizes. All this makes it almost impossible to avoid having the tooltip clipped in some cases. This is why the MWC project is leaving tooltips to last.

To solve this, give up the idea that a tooltip is positioned relative to the anchor. Instead, position it relative to the container, which is the text column. The container has a width between 720px and about 360px for a small mobile screen. Give the tooltip a fixed width of 300px, position it absolutely, and center it in the container by subtracting 50% off the margin. Et voila, a tooltip that won’t clip and looks fine at any width. :fireworks:

Avoid adding extra HTML

Most CSS solutions require a wrapper element to contain the tooltip anchor. But we want the layouts to work on the HTML as-is.

Fortunately, there is a way! When we have a note, duplicate the content as a data- attribute, eg.:

<span class="variant" data-tooltip="🔀  nibbuyhāmi → nivuyhāmi (s1-3, km, mr)">
nibbuyhāmi → nivuyhāmi (s1-3, km, mr)
</span>

This is cool, because unless we explicitly invoke the data-tooltip it just stays inert. :sleeping_bed:

To actually make use of it, use some CSS trickery to display the contents with an asterisk pseudo-element, force the element to be on one line, then cut the display short so that only the pseudo-element is revealed. You can then style the data-tooltip attribute and reveal it on hover. Something like:

.variant {
    white-space: nowrap;
    overflow: hidden;
}

.variant::before {
    content: "*";
}
.variant[data-tooltip]::after {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
}
.variant[data-tooltip]:hover::after{
    display: block;
}

So it’s a bit hacky, but it seems to work just fine. You can style the tooltip, but I don’t think it can be animated. Oh well. :man_shrugging:

You can’t include HTML in the tooltip content, so that will have to be stripped. There’s usually not much, just the odd <em> or <i>. Again :man_shrugging:

Possible uses

This approach is super lightweight:

  • Duplicate note content as data-tooltip, stripping any inline HTML.
  • Add a few lines of CSS.

No libraries are needed, and no changes to the HTML.

Any major drawbacks? I’m not aware of any.

We can make it accessible with Aria, see here for proper Aria attributes, I have not done this part.

I am envisaging this for the variants and comments in text pages. I am not considering it for the Pali/Chinese lookup, my former proposal is still better for this.

Could this approach be adapted for use on legacy text pages? Maybe! One difference is that there, the variants (etc.) are applied per word, not per segment. This would make it easier, as there is no need for the complicated psuedo-element hack to make a pure CSS anchor. Just put the data-tooltip on the word, style based on the attribute, and show the tooltip with an :after pseudo-element.

1 Like