Basic Tooltips

CSS-only (apply your own styles)

by jorgeluis

HTML

<a href="#" class="show-tooltip" data-tooltip="Some extra info about this link">Link</a>

CSS

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

.show-tooltip::after {
  content: attr(data-tooltip);
  visibility: hidden;
  opacity: 0;
  z-index: 10;
  position: absolute;
  pointer-events: none;

  -webkit-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  transition-delay: 200ms;

  white-space: nowrap;
  background: rgba(0,0,0,0.8);
  color: #fff;
  
  padding: 0.25em;
  border-radius: 5px;
}

.show-tooltip:hover::after {
  visibility: visible;
  opacity: 1;
}