tooltip on default

by Ayyappan Sakthivadivel

HTML

<div>Some text where a portion has a <span title="here's your tooltip">tooltip</span></div>

CSS

[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 {
  width: 100%;
	position: absolute;
	top: 100%;
	right: 0;
	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;
  display: inline;
}

JavaScript

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