Tooltips for mobile browsers

Question

I currently set the title attribute of some HTML if I want to provide more information:

An 

        

Answer 1

As @cimmanon mentioned: span[title]:hover:after { content: attr(title) } gives you a rudimentary tooltip on touch screen devices. Unfortunately this has problems where the default ui behavior on touch screen devices is to select the text when any non-link/uicontrol is pressed.

To solve the selection problem you can add span[title] > * { user-select: none} span[title]:hover > * { user-select: auto }

A full solution may use some other techniques:

• Add position: absolute background, border, box-shadow etc to make it look like a tooltip.
• Add the class touched to body (via js) when the user uses any touch event. Then you can do body.touched [title]:hover ... without affecting desktop users

document.body.addEventListener('touchstart', function() {
  document.body.classList.add('touched');
});

[title] {
	border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius:2px;
	position: relative;
}
body.touched [title] > * {
	user-select: none;
}
body.touched [title]:hover > * {
	user-select: auto
}
body.touched [title]:hover:after {
	position: absolute;
	top: 100%;
	right: -10%;
	content: attr(title);
	border: 1px solid rgba(0, 0, 0, 0.2);
	background-color: white;
	box-shadow: 1px 1px 3px;
	padding: 0.3em;
	z-index: 1;
}

Some text where a portion has a tooltip