How to position tooltips correctly with CSS

CSS Web Development Front End Technology

To position tooltips correctly, use the right, left, top and bottom properties.

Let us see how to position tooltips on the right:

Example

<!DOCTYPE html>
<html>
   <style>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: blue;
         color: #fff;
         z-index: 1;
         top: -6px;
         left: 100%;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      }
      .mytooltip {
         position: relative;
         display: inline-block;
      }
      .mytooltip:hover .mytext {
          visibility: visible;
      }
   </style>
   <body>
      <div class = "mytooltip">Keep mouse cursor over me
         <span class = "mytext"> My Tooltip text</span>
      </div>
   </body>
</html>

Nitya Raut

Updated on: 24-Jun-2020

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started