Skip to content

Instantly share code, notes, and snippets.

@stuarthallows

stuarthallows/custom-tooltip.html

Created August 22, 2022 22:54
Show Gist options
  • Save stuarthallows/b4e2e518ea73854565b84f96a7de8d19 to your computer and use it in GitHub Desktop.
Save stuarthallows/b4e2e518ea73854565b84f96a7de8d19 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
custom-tooltip.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Tooltips</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin-top: 100px;
}
[data-tooltip] {
position: relative;
}
[data-tooltip]::before,
[data-tooltip]::after {
--tooltip-color: #333;
--arrow-size: 0.5rem;
--scale: 0;
position: absolute;
left: 50%;
transform: translate(-50%, var(--translate-y)) scale(var(--scale));
transition: transform 100ms;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
--scale: 1;
}
[data-tooltip]::before {
--translate-y: calc(-100% - var(--arrow-size));
content: attr(data-tooltip);
background-color: var(--tooltip-color);
color: white;
padding: 0.5em;
border-radius: 0.3em;
width: max-content;
max-width: 100%;
text-align: center;
transform-origin: bottom center;
}
[data-tooltip]::after {
--translate-y: calc(-1 * var(--arrow-size));
content: "";
border: var(--arrow-size) solid transparent;
border-top-color: var(--tooltip-color);
transform-origin: top center;
}
</style>
</head>
<body>
<span data-tooltip="This is a tooltip">Hover me for more information</span>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment