[EMBED] Tooltip Custom Code
Re-enable Tour
Start the tour :)
Duncan from Memberstack
Then change the position of the pointer.
Give the .tooltip-diamond  a class name of .top .right .bottom or .left to send it in the appropriate direction.
Step 3 of 4
Next
Duncan from Memberstack
Done! Scroll down for more...
I hope you've found this useful. These tooltips are 100% native Webflow. I hope they serve you well!
Step 4 of 4
Start over
Duncan from Memberstack
Move the tooltip with class names.
Give the .tooltip-anchor a class of .top .right .bottom or .left to position it relative to the target element.
Step 2 of 4
Next
Duncan from Memberstack
Welcome! Isn't this cool?!
We can highlight almost any element with this setup. Each tour tip has a unique classname which let's us show and hide in order. example: .tour-step.1, .tour-step.2, etc.
Step 1 of 4
Next

Top

Top Tooltip
Btw - the pulsing dot is the result of some custom CSS at the top of this page. View in Webflow to see more.
Step 2 of 6
Skip

Right

Right Tooltip
The element.tooltip-anchor a class of .right and the element  .tooltip-diamond  has combo class name of .left.
Step 3 of 6
Skip

Bottom

Duncan from Memberstack
Bottom Tooltip
The element.tooltip-anchor a class of .bottom and the element  .tooltip-diamond  has combo class name of .top.
Step 4 of 6
Skip

Left

Left Tooltip
The element.tooltip-anchor a class of .left and the element  .tooltip-diamond  has combo class name of .right.
Step 5 of 6
Skip

Video

Last step!
Next Step

FAQ

Show/hide in the designer?

One of my favorite tricks is to wrap every tool tip in a div with the class .hide-on-load or something like it. When you want to edit your tour, change the display state to display. If you want to hide it and work on the rest of your site, set it to display none.

NOTE: If you do this, I recommend hard coding the correct display state in your site header. That way it always defaults back to the correct styling when you publish.

Only show the first time someone visits?

There are better solutions involving custom code which I'm not too familiar with. If you have a simple website, I recommend creating a "welcome" page which is only visiting the first time someone comes to your site. If maintaining two version of a page is too burdensome, you'll want to have the tour tips off by default, and use some custom code to automatically turn them on the first time someone visits your site. Maybe with a URL param, flag on a user object, or something like that.

Bugs when I clone?

I'm not sure what's wrong or how to fix it 🤔 It seems like Webflow will sometimes automatically make the following changes which need to be fixed after cloning...

  1. There's a page load interaction which is supposed to There's an element called "hide-on-load" at the bottom of the "copy-me" section.