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>
Updated on 23-Jun-2020 15:00:44