Assets Tools HubPremium

CSS Tooltip Generator

Generate clean, arrow-tip css tooltips with easy customization.

CSS Tooltip Generator

Generate clean, arrow-tip css tooltips with easy customization

I am a tooltip!
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  background-color: #333333;
  color: #ffffff;
  text-align: center;
  padding: 8px 12px;
  border-radius: 4px;
  position: absolute;
  z-index: 1;
  white-space: nowrap;
  font-size: 14px;
  bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-6px);
}

.tooltip-text::after {
  content: "";
  position: absolute;
  bottom: -6px; left: 50%; transform: translateX(-50%); border-top: 6px solid #333333; border-left: 6px solid transparent; border-right: 6px solid transparent;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
}

About CSS Tooltip Generator

Professional tooltips without JavaScript. Generate accessible tooltips for any element with customizable positions (top, bottom, left, right).

Something not working right?

Found a bug or have a suggestion to improve the CSS Tooltip Generator? Let us know and we'll fix it!