In this topic,
we are going to see how to create a custom tooltip using CSS.
Step-1: Create Html Code in the index.html file.
<body>
<h1 class="tooltip-heading">Tooltip</h1>
<div class="tooltips">
<span class="hover-text"> Hover On Me </span>
<div class="icon-tooltip">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</body>
Now use CSS to show the tooltip.
Step-2: Add CSS in<style>…</style> tag on index.html file.
.icon-tooltip {
visibility: hidden;
box-shadow: 0 0.4rem 0.8rem rgb(13 21 55 / 10%);
transform: translate(0.5rem);
border-radius: 0.5rem;
padding: 15px;
position: absolute;
background: #fff;
top: -14px;
z-index: 2;
display: inline-block;
margin-left: 10px;
}
.tooltips .hover-text:hover + .icon-tooltip{
visibility: visible;
}
.tooltips{
position: relative;
cursor: pointer;
}
.hover-text{
text-decoration: underline dashed;
text-underline-position: under;
}
Review the below video.
I hope you guys found something useful ??
