CSSForge

CSS Tooltip Generator

Build pure CSS tooltips with 6 styles, 5 animations, and 6 positions. No JavaScript required.

Settings
#1e293b
#f8fafc
Live Preview
This is a helpful tooltip!

Tooltip is always visible for inspection. In production, only shows on hover.

All Positions Preview
top
Tip
bottom
Tip
left
Tip
right
Tip
Generated CSS
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #f8fafc;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 200px;
  white-space: normal;
  z-index: 100;
  pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1e293b;
}

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

HTML Structure

<div class="tooltip-wrapper">
  <button>Hover me</button>
  <div class="tooltip">This is a helpful tooltip!</div>
</div>