Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML tooltip on hover using CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Tooltip</title>
<style>
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;
transform:translateX(-50%);
bottom: 25px;
padding: 0.5em;
background-color: black;
border-radius: 0.25em;
color: white;
text-align: center;
transition:0.2s;
}
[data-tooltip]:after {
content: "";
position: absolute;
opacity: 0;
bottom: 15px;
margin-left: -5px;
border: 5px solid black;
border-color: black transparent transparent transparent;
transition:0.2s;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
opacity: 1;
}
</style>
</head>
<body>
<p>Example CSS Tooltip <span data-tooltip="Tooltips are used to provide information about an element on a web page.">i</span></p>
</body>
</html>
@w3collective

This comment has been minimized.

Copy link
Owner Author

@w3collective w3collective commented Apr 13, 2021

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