How to Add a Tooltip in Webflow

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

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.

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