Using custom attributes for CSS tooltips instead of title attributes

This page suggested a CSS technique for making some text available to the user on mouseover or, on touch screens, with tapping. Here is a demonstration, with abbreviation expansion as the text:

• UK (uses the technique described here)
• UK (uses the HTML technique, a title attribute, for comparison)

In HTML documents, the use of title attributes is a simple method for giving the reader advisory texts about elements on mouseover. The use of such “title tooltips” for links is described in Jacob Nielsen’s article Using the Title Attribute to Help Users Predict Where They Are Going. The method can also be used for other elements. For example, to provide an expansion of an abbreviation, such as “UK”, on mouseover, you could write <span title=​"United Kingdom">UK</span> in HTML. You could use the abbr element instead of span here (test: UK), but you may well want to provide advisory texts for expressions that cannot be regarded as abbreviations.

There are, however, several problems with this approach:

1. It does not work on touch screens. Browsers running on devices without a mouse do not have mouseover events.
2. There is no hint to the user about an advisory text being available on mouseover. For links, this is not that serious, but e.g. for abbreviations it means that the user only accidentally notices the effect and even then will not know which abbreviations have expansions.
3. The quality of the implementation of title tooltips in browsers is generally poor: the text appears after a delay, in a rather small font
4. The rendering of title tooltips cannot be modified by the author or by the user, with CSS or otherwise.

Browsers used to render abbr elements with a dotted line under the text, when the element has a title, but this no longer common. Using a document style sheet, an author can make all elements with title underlined in any way that you can implement using CSS. This would solve problem 2 above, especially if you use e.g. dashed line instead of the less noticeable dotted line. (The current “Living HTML Standard” has a section on “suggested” or “expected” default rendering, with a CSS rule that sets, as “text decoration”, a dotted underline for abbr and acronym elements that have a title attribute However, a dotted underline may obscure the lower parts of letters; using a bottom border works better.

The technique suggested here consists of the following:

• In HTML, use an attribute with a fixed name starting with data-, for example data-info, instead of title attribute.
• Use CSS to add generated content after every element that has the attribute you chose. Generate it from the value of the attribute, perhaps with some fixed characters added to it; this page prefixes the value with an equals sign and a space. Make the generated content a block positioned “#absolutely”, i.e. relative to actual element, placed e.g. right below it.
• Make the generated content initially hidden, but visible when the actual element is “moused over”, using the :hover pseudo-class. This solves problem 1, since touch-screen browsers put an element to this pseudo-class when it is tapped on and take it away from it when anything else is tapped on.
• Style the generated content otherwise as you see fit to solve problems 3 and 4. The style used in this document is of course just an example: using the same font as in the actual element, a solid thin border and small padding, light yellow background, and rather small width (about 20 characters), letting the content wrap as needed.
• Style the actual elements with some hint, such as dashed bottom border (for which you could set color, but this page uses the same color as the text).
• Consider adding some information about the feature at the start of the document or elsewhere. For example, in a site with a large number of abbreviations in it, you might use this technique for all of them and say, e.g. on the front page, “For expressions with a dashed line under them, an explanation will be shown when you mouse over them or (on touch screen devices) tap on them.”

Additional remarks:

• It is better to omit the title attribute, since it would often cause disturbing duplication: both the title tooltip and our CSS tooltip would appear.
• For existing content, you might consider just changing the attribute name title to the one you chose and adding a suitable CSS style sheet outlined here
• If you cannot change existing HTML code that uses title attributes but can inject both CSS and JavaScript, consider adding JavaScript that changes the attribute name:

    window.onload = function() {
        for(var el of document.body.children) {
  	  var t = el.getAttribute('title');
  	  if(t) {
  	      el.setAttribute('data-info', t);
  	      el.removeAttribute('title');
  	  }
        }
    }
  

• The reason for using attributes that start with data- is that such attributes are reserved for use as “private to the page or application”. We can thus be reasonably sure that such an attribute will assigned some meaning in some future version of HTML or as browser-specific extension. See section Embedding custom non-visible data with the data-* attributes in the current “Living HTML Standard”.
• This page uses data-info and not the perhaps more obvious data-title, because this is (in general) not about titles but additional information of varying types.

The CSS code used here to implement the idea is this:

    [data-info] {
	border-bottom: dashed thin;
	position: relative;
    }
    [data-info]::after {
	display: block;
        width: 20ch;
	position: absolute;
	z-index: 100;
	left: 1ch;
	top: 1em;
	content: "=\A0" attr(title);
	border: solid thin gray;
        padding: 0.2em;
	color: black;
	background: #ffa;
	visibility: hidden;
	line-height: 0.9;
    }
    [data-info]::after {
	content: "=\A0" attr(data-info);
    }    
    [data-info]:hover::after {
	visibility: visible;
    }

Created 2022-11-14.

This page belongs to section Web authoring and surfing of the IT and communication by Jukka K. Korpela.