HTML native tooltip
To create native HTML tooltip all you need is to add title to your HTML like this:
<div title="Hello, I'm HTML native tooltip">
Hover me!
</div>CSS + HTML tooltip
HTML native tooltip has one significant disadvantage - we can't style it. Here CSS comes to the rescue! We can create a custom tooltip using data attributes and style it with CSS. Let's see the code snippet.
<div data-tooltip="Hello, I'm custom tooltip created with CSS and HTML!">
Hover me!
</div>/* customizable START */
body {
min-height: 100vh;
width: 100%;
margin: 200px 0;
font-family: Arial;
}
p {
padding: 20px 0;
font-size: 16px;
cursor: pointer;
position: relative;
text-align: center;
}
/* customizable END */
[data-tooltip]:before {
/* required code */
content: attr(data-tooltip);
position: absolute;
opacity: 0;
/* customizable */
top:0;
left:50%;
transform: translateX(-50%);
transition: 256ms all ease;
padding: 10px 20px;
color: #333;
border-radius: 5px;
box-shadow: 0px 6px 21px rgb(0 0 0 / 10%);
}
[data-tooltip]:hover:before {
/* required code */
opacity: 1;
/* customizable */
background: #fff;
border-radius: 5px;
border: 1px solid #ccc;
top: -30px;
}And here is our result of our code on codepen:
