How to create tooltips?

Is there a way to create tooltips in webflow?

There is always a way to do that :wink: I’m Bartek and I’m here to make miracles :wink: Tell me pelase what exactly do you want to create. Are those tooltips static or dynamic. How many of them will there be?

2 Likes

Hey @bartekkustra awesome, thanks! Basically there will only be about 3-4. The information within the tooltip will be static. Thanks for your help!

I’ve created something like this in Question #3

Site: http://forumhelp.webflow.com/#q3
Troubleshooting: link

jQuery used here:

$(document).ready(function() {
	// Question #2
	
	$('.q3-header').hover(
		function() {
			$('.q3-tooltiptext').html('This is a tooltip for header hover.');
			$('.q3-tooltipcontainer').fadeIn();
		},
		function() {
			$('.q3-tooltipcontainer').fadeOut();
		}
	);
	$('.q3-paragraph').hover(
		function() {
			$('.q3-tooltiptext').html('Oh boy, this is amazing...');
			$('.q3-tooltipcontainer').fadeIn();
		},
		function() {
			$('.q3-tooltipcontainer').fadeOut();
		}
	);
	$('.q3-input').hover(
		function() {
			$('.q3-tooltiptext').html('I\'m thinking of implementing PayPal here so you can donate ;D');
			$('.q3-tooltipcontainer').fadeIn();
		},
		function() {
			$('.q3-tooltipcontainer').fadeOut();
		}
	);
});
2 Likes

Hey @bartekkustra I would like to implement this on my site and style out the tool tips to my liking.

Can you explain a little how these tool tips work? I don’t know much about javascript, and you are the ninja here lol.

Basically, say I create a class and give it all the styles I would want for a tool tip. I would want the tool tip to appear where the cursor is hovering on certain elements.

  1. How do I set the tool tip position to cursor hover point?
  2. How do I assign a tool tip to an element (say a certain div)?
  3. How do I make sure that my tool tip has the desired class that I give it? (as I described it above or another way?)

Thank you so much for your help! :smiley: All of your help is shaping the future of webflow designers/developers and our websites. :smile:

Sincerely,

Waldo :smiley:

1 Like

Hi Waldo, I prepared an extension to Webflow, that lets you easily add a tooltip to any element.
Read more here: http://tooltipster-for-webflow.webflow.io/

6 Likes