Hover Tooltip

Tooltips on hover using CSS pseudo-elements and the data-tip attribute.

Published May 19, 2026

Demo

HTML
				
				<span class="tip" data-tip="Tooltip text here">Hover over me</span>

CSS
				
				.tip {
  position: relative;
  cursor: default;
  border-bottom: 2px dashed #5b4cdb;
}

.tip::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  color: #fff;
  font-size: .8rem;
  white-space: nowrap;
  padding: .4rem .7rem;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

.tip::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a1a2e;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

.tip:hover::before,
.tip:hover::after {
  opacity: 1;
}

			

How it works

The tooltip text lives in a data-tip attribute on the element. The ::before pseudo-element reads it with content:attr(data-tip) and displays it above the element. The ::after pseudo-element draws the arrow. Both are invisible by default and fade in on :hover using opacity.