Design

4 views

4 min

How to Add a Tooltip in Webflow

Learn how to add tooltips in Webflow without a library, using only CSS and an HTML embed.

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to add tooltips in Webflow without an external library, using only CSS.

Example

Hover over the elements

CSS property	Value	Role
position	relative	On the trigger element
position	absolute	On the tooltip
visibility	hidden	Hidden by default
opacity	0	Transparent by default
:hover visibility	visible	Shown on hover

1. Create the HTML structure in an Embed

Add an Embed element to your page with the structure below. Change the tooltip text to fit your needs.

2. Add this CSS in an embed or in your global styles

.tooltip-wrapper { position: relative; display: inline-block; }
.tooltip {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s;
}
.tooltip-wrapper:hover .tooltip { visibility: visible; opacity: 1; }

3. Publish and test

The tooltip appears on hover with a smooth transition. Adjust the bottom: 125% value to place the tooltip below (top: 125%) or on the sides.

good to know

This pure CSS approach doesn't work on mobile (no hover). For a mobile-friendly version, use a click event instead of hover in JavaScript: element.addEventListener('click', () => tooltip.classList.toggle('visible')).

Conclusion

Tooltips improve understanding without cluttering the interface. Use cases:

Explaining a technical term in a form
Extra info about a price or feature
Contextual help for icons without labels

How to Add a Tooltip in Webflow

Example

1. Create the HTML structure in an Embed

2. Add this CSS in an embed or in your global styles

3. Publish and test

This pure CSS approach doesn't work on mobile (no hover). For a mobile-friendly version, use a click event instead of hover in JavaScript: element.addEventListener('click', () => tooltip.classList.toggle('visible')).

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials