Arrow to the bottom of the tooltip with CSS

Use the top CSS property to add arrow to the bottom of the tooltip.


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

Live Demo

<!DOCTYPE html>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: blue;
         color: #fff;
         z-index: 1;
         bottom: 100%;
         left: 60%;
         margin-left: -90px;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      .mytooltip {
         position: relative;
         display: inline-block;
         margin-top: 50px;
      .mytooltip .mytext:after {
         content: "";
         position: absolute;
         top: 100%;
         left: 50%;
         margin-left: -10px;
         border-width: 7px;
         border-style: solid;
         border-color: blue transparent transparent transparent;
      .mytooltip:hover .mytext {
         visibility: visible;

      <div class = "mytooltip">Keep mouse cursor over me
         <span class = "mytext"> My Tooltip text</span>