Teach with us

Arrow to the left of the tooltip with CSS

Use the right CSS property to add arrow to the right of the tooltip.

You can try to run the following code to add a tooltip with arrow to the left

Example

Live Demo

<!DOCTYPE html>
<html>
   <style>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: blue;
         color: #fff;
         z-index: 1;
         top: -5px;
         left: 110%;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      }
      .mytooltip {
         position: relative;
         display: inline-block;
         margin-left: 50px;
      }
      .mytooltip .mytext:after {
         content: "";
         position: absolute;
         top: 50%;
         right: 100%;
         margin-top: -5px;
         border-width: 6px;
         border-style: solid;
         border-color: transparent blue transparent transparent;
      }
      .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>
Updated on 24-Jun-2020 07:03:37

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements