CSS Tooltip Generator

Generate pure CSS tooltips with live preview — position, colors, arrow size, and radius.

Position

Background

Text color

Arrow size (px)

6px

Border radius (px)

6px

Font size (px)

13px

Preview

CSS

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

.tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background-color: #1e293b;
  color: #f8fafc;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 100;
}

.tooltip::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 6px;
}

  .tooltip::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-color: #1e293b transparent transparent transparent;
  }

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

HTML

<div class="tooltip-wrapper">
  Hover over me
  <span class="tooltip">I'm a tooltip!</span>
</div>

How pure CSS tooltips work

The tooltip uses a ::after pseudo-element to draw a CSS triangle (by setting three transparent borders and one colored border). The tooltip text is absolutely positioned relative to its wrapper, hidden by default, and revealed on:hover via opacity and visibility transitions. No JavaScript is required.

For more complex animations, try the CSS Animation Generator. For button styling, see CSS Button Generator.

Private & free — this tool runs entirely in your browser.