CSS-Only Tooltip Generator

Generate lightweight, accessible CSS for tooltips.

Live Preview

HTML Usage

<!-- Default (bottom) -->
<button class="tooltip" data-tooltip="This is a tooltip!">Hover me</button>

<!-- Top -->
<button class="tooltip tooltip-top" data-tooltip="Tooltip on top">Top Tooltip</button>

<!-- Left -->
<button class="tooltip tooltip-left" data-tooltip="Tooltip on left">Left Tooltip</button>

<!-- Right -->
<button class="tooltip tooltip-right" data-tooltip="Tooltip on right">Right Tooltip</button>

CSS Code

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip::before,
.tooltip::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
  z-index: 10;
}

.tooltip::before {
  content: attr(data-tooltip);
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
}

.tooltip::after {
  content: '';
  border-style: solid;
  border-width: 5px;
}

.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Bottom (default) */
.tooltip::before { bottom: 100%; margin-bottom: 10px; }
.tooltip::after { bottom: 100%; margin-bottom: 5px; border-color: #333 transparent transparent transparent; }

/* Top */
.tooltip.tooltip-top::before { top: 100%; margin-top: 10px; }
.tooltip.tooltip-top::after { top: 100%; margin-top: 5px; border-color: transparent transparent #333 transparent; }

/* Left */
.tooltip.tooltip-left::before, .tooltip.tooltip-left::after { left: auto; right: 100%; top: 50%; transform: translateY(-50%); }
.tooltip.tooltip-left::before { margin-right: 10px; }
.tooltip.tooltip-left::after { margin-right: 5px; border-color: transparent transparent transparent #333; }

/* Right */
.tooltip.tooltip-right::before, .tooltip.tooltip-right::after { left: 100%; right: auto; top: 50%; transform: translateY(-50%); }
.tooltip.tooltip-right::before { margin-left: 10px; }
.tooltip.tooltip-right::after { margin-left: 5px; border-color: transparent #333 transparent transparent; }

CSS-Only Tooltip Generator

Live Preview

HTML Usage

CSS Code

How do I use this?

How do I change the position?

Is this accessible?