How To Create Tooltip Using Css

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;
}