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>

Advertisements