CSS Tooltip Generator

CSS Tooltip

A CSS Tooltip is a small pop-up box that appears when a user hovers over or focuses on an element. It provides additional information or context without cluttering the interface. Tooltips are often used for buttons, icons, links, and images to explain their functionality or display hidden details. With CSS alone, you can create visually appealing, fully customizable tooltips without JavaScript.

Basic Structure

The simplest way to create a tooltip is by wrapping an element (like a text or icon) in a container and adding the tooltip text as a child element. Then, you can use CSS positioning and pseudo-classes to control its visibility and appearance.

<div class="tooltip">
  Hover over me
  <span class="tooltip-text">This is a tooltip!</span>
</div>

Basic Tooltip Styling

Here is a simple CSS example for creating a tooltip that appears above the element when hovered:

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

.tooltip-text {
  visibility: hidden;
  width: 140px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 6px 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Position above the element */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

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

Tooltip Arrow

You can add a small arrow to the tooltip using a CSS pseudo-element. The arrow helps users identify which element the tooltip refers to.

.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

Tooltip Positions

Tooltips can appear in different positions relative to the target element - top, bottom, left, or right. You can easily modify the position by changing the CSS properties top, bottom, left, and right.

Example - Tooltip on the right:

.tooltip-text {
  bottom: auto;
  top: 50%;
  left: 105%;
  transform: translateY(-50%);
}

.tooltip-text::after {
  top: 50%;
  left: -5px;
  margin-top: -5px;
  border-color: transparent #333 transparent transparent;
}

Fade and Slide Effects

You can enhance tooltip animations by combining opacity with transform transitions to create sliding or fading effects.

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

Responsive Tooltips

To make tooltips responsive, use relative units (like em or rem) and ensure text wraps properly. You can also control tooltip width with max-width and use media queries to adjust position for smaller screens.

.tooltip-text {
  max-width: 200px;
  white-space: normal;
  font-size: 0.9rem;
}

Accessible Tooltips

For better accessibility, tooltips should be triggered not only on hover but also on focus. This allows keyboard users to see the tooltip when they tab to the element. You can achieve this using the :focus pseudo-class:

.tooltip:hover .tooltip-text,
.tooltip:focus .tooltip-text {
  visibility: visible;
  opacity: 1;
}

Advanced Example - Styled Tooltip with Animation

Here is an advanced example that includes custom colors, subtle animations, and rounded corners for a modern look:

.tooltip {
  position: relative;
  display: inline-block;
  font-weight: 500;
  color: #0066cc;
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  background-color: #222;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 10px 15px;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #222 transparent transparent transparent;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

Conclusion

CSS Tooltips are a simple yet powerful way to add interactivity and usability to web elements. With only CSS, you can control position, style, and animation effects, creating smooth and elegant tooltips without needing JavaScript. Experiment with colors, transitions, and shapes to match your website’s design and make the user experience more intuitive.

Last update: 13. 08. 2025.