Arrow to the left of the tooltip with CSS

CSS Web Development Front 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

<!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>

George John

Published on 17-May-2018 09:08:28

Previous Page Print Page