Tooltip com CSS puro

2d atrás

Vamos fazer um tooltip, também chamado como texto informativo, usando apenas #CSS. Para isso, adicione o seguinte HTML:

<span class="tooltip" data-title="Texto da tooltip">Passe o mouse para ver o tooltip</span>

O texto que você quer que apareça no tooltip é informado na propriedade data-title.

Agora, adicione o seguinte CSS:

.tooltip {
	position: relative;
}

Vamos mostrar o texto do tooltip no pseudo-elemento after, esse será o CSS dele.

.tooltip::after {
	background-color: #212121;
	border-radius: 0.5em;
	color: #FFFFFF;
	content: attr(data-title);
	display: none;
	left: 0;
	padding: 0.5em 1em;
	position: absolute;
	top: calc(100% + 1em);
}

No pseudo-elemento before, vamos criar uma seta, que será um detalhe do tooltip:

.tooltip::before {
	border: 0.5em solid transparent;
	border-bottom-color: #212121;
	content: '';
	display: none;
	left: 0.5em;
	position: absolute;
	top: 100%;
}

E por fim, vamos mostrar o tooltip, apenas ao passar do mouse:

.tooltip:hover::after {
	display: block;
}

.tooltip:hover::before {
	display: block;
}

Veja o código completo e o exemplo abaixo:

Comentários (0)