Set left tooltip with CSS

CSSWeb DevelopmentFront End Technology

To set left tooltip, use the right CSS property.

You can try to run the following code to set left tooltip to a text:


Live Demo

<!DOCTYPE html>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: orange;
         color: white;
         z-index: 1;
         top: -6px;
         right: 100%;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      .mytooltip {
         position: relative;
         display: inline-block;
         margin-left: 150px;
      .mytooltip:hover .mytext {
         visibility: visible;
      <div class = "mytooltip">Keep mouse cursor over me
         <span class = "mytext"> My Tooltip text</span>
Published on 16-May-2018 07:38:49