CSS Tooltip

CSS tooltip refers to a popup message that appears after a mouse hover, or when elements get keyboard focus. It disappears on mouse out, or when the element loses keyboard focus.

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;

CSS Tooltip-Positions

• Top of the element
• Left side of the element
• Right side of the element
• Bottom of the element

Right side of the element

The example below places the tooltip to the right side of the hover able text by using the left property with the position: relative (to move it right).

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: yellow;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}

Left side of the element

The creation of the HTML tooltip on the left side involves the use of right with the position: relative.

 position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;