00:00
Buy Me a Beer
untilities

Tooltips in Webflow

Easily add tooltips to your webflow website with one simple attribute

Instructions

Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.

Add a tooltip with position top.

1

Copy this attribute:

Copied!
vdx-tooltip-top
2

Paste the attribute into the Custom Attributes Name field of your Tooltip Element

tooltip_icon
tooltip_icon
Style
Settings
Interactions
Custom Attributes
Name
vdx-tooltip-top
Value
3

Add text to the custom attributes Value.

This is the text that will display in your tooltip.

tooltip_icon
Style
Settings
Interactions
Custom Attributes
Name
vdx-tooltip-top
Value
This is a top Tooltip!!
4

Publish

Add a tooltip with position bottom.

1

Copy this attribute:

Copied!
vdx-tooltip-bottom
2

Paste the attribute into the Custom Attributes Name field of your Tooltip Element

tooltip_icon
tooltip_icon
Style
Settings
Interactions
Custom Attributes
Name
vdx-tooltip-bottom
Value
3

Add text to the custom attributes Value.

This is the text that will display in your tooltip.

tooltip_icon
Style
Settings
Interactions
Custom Attributes
Name
vdx-tooltip-bottom
Value
This is a bottom Tooltip!!
4

Publish

Add a tooltip with position left.

1

Copy this attribute:

Copied!
vdx-tooltip-left
2

Paste the attribute into the Custom Attributes Name field of your Tooltip Element

tooltip_icon
tooltip_icon
Style
Settings
Interactions
Custom Attributes
Name
vdx-tooltip-left
Value
3

Add text to the custom attributes Value.

This is the text that will display in your tooltip.

tooltip_icon
Style
Settings
Interactions
Custom Attributes
Name
vdx-tooltip-left
Value
This is a left Tooltip!!
4

Publish

Add a tooltip with position right

1

Copy this attribute:

Copied!
vdx-tooltip-right
2

Paste the attribute into the Custom Attributes Name field of your Tooltip Element

tooltip_icon
tooltip_icon
Style
Settings
Interactions
Custom Attributes
Name
vdx-tooltip-right
Value
3

Add text to the custom attributes Value.

This is the text that will display in your tooltip.

tooltip_icon
Style
Settings
Interactions
Custom Attributes
Name
vdx-tooltip-right
Value
This is a right Tooltip!!
4

Publish

Sponsor the Magic and
Buy Me a Beer

Ailín Tobin
Ireland

VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.

Think of it like buying me a pint for keeping your Webflow spells flowing.

You can support it here.

Cheers, legend!

This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.

Visual DX Tooltip Examples

icon-embed-medium
Style
Settings
Interactions
Custom Attributes
Name
vdx-tooltip-top
Value
This is a Top Tool Tip ;)
icon-embed-medium
Style
Settings
Interactions
Custom Attributes
Name
vdx-tooltip-bottom
Value
Lefty
icon-embed-medium
Style
Settings
Interactions
Custom Attributes
Name
vdx-tooltip-right
Value
Right so, Ted!