Arrow to the top of the tooltip with CSS

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


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

Live Demo

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