CSS Tooltips

Tooltips

A tooltip is a small label that appears when the user hovers or focuses an element. Tooltips are commonly used to explain icons, buttons, or UI actions.

You can build a tooltip using only CSS by combining:

• position: relative on the trigger element
• position: absolute on the tooltip content
• :hover and/or :focus states
• opacity + transform with transitions for smooth motion

Basic Tooltip

HTML structure (tooltip text inside a child element):

<span class="tip">
  Hover me
  <span class="tip-text">Tooltip text</span>
</span>

CSS:

.tip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.tip-text {
  position: absolute;
  left: 50%;
  bottom: 120%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

.tip:hover .tip-text {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

This tooltip appears above the element and fades in smoothly.

Tooltip Position

You can position tooltips above, below, left, or right by changing the tooltip’s absolute positioning.

Top (default example):

.tip-text {
  left: 50%;
  bottom: 120%;
  transform: translateX(-50%);
}

Bottom:

.tip-text {
  left: 50%;
  top: 120%;
  bottom: auto;
  transform: translateX(-50%);
}

Left:

.tip-text {
  right: 120%;
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

Right:

.tip-text {
  left: 120%;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

Tooltip Arrow

You can create a small arrow using a pseudo-element (::after or ::before) and CSS borders.

.tip-text::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0,0,0,.85) transparent transparent transparent;
}

This creates a triangle pointing down from the tooltip (for a tooltip shown above the element).

Summary

• CSS-only tooltips can be built with relative/absolute positioning and :hover.
• Use opacity + transform transitions for smooth effects.
• Control position by changing top/bottom/left/right values.
• Create arrows with pseudo-elements and border triangles.