Arrow to the right of the tooltip with CSS

CSSWeb DevelopmentFront End Technology

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>
Updated on 24-Jun-2020 07:12:08