Streaming live at 10am (PST)

How to create tooltips?


#1

Is there a way to create tooltips in webflow?


#2

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?


#3

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


#4

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();
		}
	);
});

#5

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


#6

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/


#7