Arrow to the right of the tooltip with CSS

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

You can try to run the following code to add a tooltip with an arrow to the right:


Live Demo

<!DOCTYPE html>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: blue;
         color: #fff;
         z-index: 1;
         top: -5px;
         right: 110%;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      .mytooltip {
         position: relative;
         display: inline-block;
         margin-left: 150px;
      .mytooltip .mytext:after {
         content: "";
         position: absolute;
         top: 50%;
         left: 100%;
         margin-top: -5px;
         border-width: 6px;
         border-style: solid;
         border-color: transparent transparent transparent blue;
      .mytooltip:hover .mytext {
         visibility: visible;
      <div class = "mytooltip">Keep mouse cursor over me
         <span class = "mytext"> My Tooltip text</span>