How can I create and show tooltips for hovering on text

Design help Animations & Interactions
1

Hello community - New here and new to Webflow. I am building my company site on Webflow and loving it.

Here’s the question:
I am trying to create a tool tip hover effect that would be triggered by hovering over text (in this case an pricing feature text).

I want to create a pop with text similar to what Webflow’s own pricing page has (Plans & pricing | Webflow). Where if you hover over the info icon it shows more text. I want to do with with the text line.

Can anyone point me to the right direction? I did not find any topic on the forum.

2

I would look at Tippy.js - Tooltip, Popover, Dropdown, and Menu Library

1 Like
3

As Jeff said, tippy.js is great - but if you don’t know anything related to javascript, it can be tricky to implement.

I made this Webflow layer on top of it, so that you can implement tooltips with nothing but a few custom attributes and this script :)

Here’s the script, video tutorial, and cloneable:

Hope it helps!!

1 Like
4

hi @krnshrm in example you have provide there’s only one position to show tooltip on top of icon when hover. So instead of loading several external libraries to make it work another option can to use simple CSS. :man_shrugging:

here is simple principle how to

or

or … another resources on internet

m2c

1 Like