Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
HTML tooltip on hover using CSS
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Tooltip</title>
body {
padding: 10%;
[data-tooltip] {
position: relative;
cursor: pointer;
background: black;
color: white;
font-size: 12px;
border-radius: 1em;
padding: 0 0.5em;
[data-tooltip]:before {
content: attr(data-tooltip);
position: absolute;
opacity: 0;
width: 150px;
bottom: 25px;
padding: 0.5em;
background-color: black;
border-radius: 0.25em;
color: white;
text-align: center;
[data-tooltip]:after {
content: "";
position: absolute;
opacity: 0;
bottom: 15px;
margin-left: -5px;
border: 5px solid black;
border-color: black transparent transparent transparent;
[data-tooltip]:hover:after {
opacity: 1;
<p>Example CSS Tooltip <span data-tooltip="Tooltips are used to provide information about an element on a web page.">i</span></p>
Copy link

w3collective commented Apr 13, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment