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:

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:

Additional remarks:

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.