Tooltip Generator

Generate hover tooltips with position controls

Position

Colors

Styling

12px
8px
6px
14px

Arrow

6px
0ms

Presets

Live Preview

Tooltip text

Generated CSS

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

.tooltip {
  position: absolute;
  background-color: #1f2937;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0ms ease;
  bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  
  
  
}

.tooltip-container:hover .tooltip {
  opacity: 1;
}
.tooltip::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  bottom: -6px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #1f2937;
  
  
  
}