Arrow to the left of the tooltip with CSS

CSSWeb DevelopmentFront End Technology

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>
raja
Updated on 24-Jun-2020 07:03:37

Advertisements