How to position tooltips correctly with CSS

CSSWeb DevelopmentFront End Technology

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

Let us see how to position tooltips on the right:


Live Demo

<!DOCTYPE html>
      .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;
      <div class = "mytooltip">Keep mouse cursor over me
         <span class = "mytext"> My Tooltip text</span>
Updated on 24-Jun-2020 06:54:07