How can I add inline text on hover in Webflow?
TL;DR
- Wrap trigger text and hidden text in spans, styling the hidden one with opacity 0 and display none.
- Use hover interactions or custom CSS to show the hidden span on hover, ensuring inline appearance without layout shift.
To add inline text on hover in Webflow, you can use interactions or pseudo-class styling to make hidden text appear within a paragraph or span when the user hovers over surrounding text. Here’s how to do it.
1. Structure Your Content with Rich Text or Spans
- Add a Text Block or Paragraph to the page.
- Inside the text, select the portion you want to trigger the hover and click + Span to wrap it in a span.
- Add another Span element inside the main text for the inline hover text, and place it immediately after or inside the main span trigger.
2. Style the Hover Text Span
- Select the hover text span and give it a class name (e.g.,
hover-tooltip). - Set this span’s Display to Inline or Inline-Block.
- Set Opacity: 0 and Display: None initially.
- Optionally apply a slight transition on opacity for smooth fade-in.
3. Set Up Hover Interaction
- Select the span that should trigger the text reveal (e.g.,
trigger-span). - Go to the Interactions Panel, click Element Trigger, and choose Mouse Hover.
- Create a new hover animation:
- On Hover In: Set Display: Inline / Inline-Block and Opacity: 100% on the
hover-tooltipspan. - On Hover Out: Set Opacity: 0% and then Display: None.
4. Prevent Layout Shift (Optional)
- To avoid layout shift when showing the text, you can:
- Set the hover text span visibility using Opacity only, and keep Display: Inline at all times.
- Assign it a fixed width or use visibility: hidden / visible instead of display.
5. Use Custom Code for Hard Inline Behavior (If Needed)
- If you need the hover text to appear truly inline without affecting layout, Webflow's native controls might fall short.
- In that case, add custom CSS in an Embed Element or inside the Page Settings > Custom Code area:
- Example: Target the hover text span with a rule like
.hover-tooltip { visibility: hidden; } .trigger-span:hover .hover-tooltip { visibility: visible; }
Summary
To show inline hover text in Webflow, wrap trigger text and hidden content in spans, style the hidden text, and use hover interactions or custom CSS to reveal it. This lets you create clean in-paragraph tooltips or labels that display when hovered.