How can i make tooltips be shown by the cursor/pointer on hover?

Design help Custom code
1

Hello!
I got stuck in creating tooltip, got an idea of puttig tooltip content on background, but can"t understand how to make tooltip appear in exact place, like here Plans & pricing | Webflow
mine tolltips showing up only fixed to a center of a page. ( i"ve done everything like it"s been shown here Footer menu with popups - #7 by sabanna - Animations & Interactions - Forum | Webflow)

1920×1080 316 KB

tooltips have to appear infront of question icon in a list, for example like here Plans & pricing | Webflow

https://preview.webflow.com/preview/olha-vasilievas-dandy-site?preview=e5492a075de7e75b799ea0639c0c9a09

MOD EDIT: Changed name from “How can i make tooltips be shown at exact place?” For easier indexing and moved from Need help category to Embed/Custom Code

Here is my public share link: LINK
(how to access public share link)

2

Hello @iirispaikese,

For create a tool-tip that follows the cursor around (like on the pricing page) within only Webflow not possible now. You wll need to add a jQuery plugin or custom code.

Regards,
Anna

3

I’ve used this in the past:
http://iamceege.github.io/tooltipster/

Hope this helps :smiley:

1 Like
4

Hi!)
If I understand you correctly, you want to do this Screen capture - 70d1c8c5f7a383685de1feb0d28d3e02 - Gyazo
In order to tooltip appears next to icon:

  1. for alt div: “position: relative” Screenshot by Lightshot
  2. create text block in alt div Screenshot by Lightshot
  3. for this text block: “position: absolute” (top left) Screenshot by Lightshot
  4. set the desired style to text block and “display: none”.
  5. set interaction for icon Screenshot by Lightshot
3 Likes
5

Thank you, so much)))

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.