Tooltipster for Webflow - easy to use plugin for tooltips

I’m glad to have found this! What element do I need to add to the Navigator to make it work? Or do I add the custom attribute to each input field (.form-input-resource in the screenshot below from my instance)? I’m guessing not the latter because it doesn’t work:)
35%20AM

Staging site here.

You add an attribute to each element that should have a tooltip.

Hi Maciej, thanks for this amazing tutorial.

One quick question, in the style customization code that you posted above, how can the tooltip text be made black (#000000)? I tried to add that in different ways but it didn’t work.

Thanks for your help, I really appreciate it!

To customize text color and other text styles you need to add the code below to your custom code

<style>
.tooltipster-sidetip .tooltipster-content {
  color: #000000;
  line-height: 18px;
  padding: 6px 14px;
}
</style>
1 Like

Thank you very much!

1 Like

@Maciej your tutorial works great and is SO HELPFUL, thank you.

One question: Is it possible to update the code so that it shows the tooltip on tap on mobile? Currently, you have to tap (click) and hold with your finger, which is confusing to most users.

Thank you!

Edit, you can see it here https://www.watchdoglabs.com/tooltip It’s inside a link block so that there is a “hand” mouse icon on desktop…

@Maciej if you have a second, I could really use your help, thanks :slight_smile:

Hi @webdes , sorry for the delay - I was on vacation :slight_smile:
I updated the tutorial and custom code to add in Webflow so that it handles mobile well

Use the new code from the updated tutorial and let me know if tapping on mobile works now.

1 Like

Hi @Maciej somebody pointed out the following:

I wanted to let you know that your website is using RawGit for its tooltip library. RawGit is being sunsetted because it has become a popular distribution service for malware. You should switch to unpkg.com or one of the other alternatives listed on RawGit.com.

Is this true and if so is there a way to switch your tooltip code over to unpkg or another alternative, without re-doing all tooltips?

Thanks,
Simon

Hi @webdes in the new version, that I updated 2 weeks ago, I stopped using RawGit, so just follow the new tutorial and all existing tooltips should work.

Great job @Maciej

Thanks for sharing with the community! :webflow_heart:

@Maciej - I set up the most stripped-down test I could and can’t figure out why I’m not seeing the tool tips.

  • I copied and pasted the two code snippets directly into the appropriate places in a fresh instance of one of Webflow’s basic templates. (Code screenshot below)
  • I selected an item (“Secondary Button” in the top section of the site) and set the custom attributes:

tooltipster-attributes

… but when I hover, I get the same standard tooltip I would get if I were to omit the tooltipster=“top” attribute altogether and just add a title:

image

… so it seems like the tooltipster code is being entirely ignored in favor of some default one.

Here’s a share link for the test site, though I don’t know how to share the custom code settings. https://preview.webflow.com/preview/tooltipstertester?utm_source=tooltipstertester&preview=6c2d1bc117e9f18e04d909238cb98c6d

FWIW, here’s the custom code section if you can’t get to it from the preview:

I’ve looked at this long enough I’m probably just missing something obvious, so I’m ready for my “duh” moment. Thanks!

Custom code only works in published pages, not in Webflow Preview. I can see that here on http://tooltipstertester.webflow.io/ the tooltipster works fine on desktop. In your case the tooltip is added on a link block element, so tooltip is not showing on mobile tap in favour of following a link (this prevents blinking tooltip after tapping it on mobile a link).

1 Like

Thanks! Curious, have some I odd setting locally for Mac Chrome, because this is showing up fine in Safari and Firefox, but in Chrome still has the default look shown in the screenshot above. Time to go root around to look for the cause of that, unless someone else confirms it looks that way in their Chrome as well.

@Maciej EDIT: Yep, just looked at it in Chrome on a different Mac, and it’s fine. Thanks for the great tool, and for the support! Now to figure out what the heck is going on with my Chrome configuration.

@ramatsu Did you solve your problem? Maybe this is caused by some “dark mode” extension or something similar?

Thanks for the follow up @Maciej - I continued to have erratic results on my Mac across browsers, so I bailed for now. As best I can tell, it seems to run ok on my wife’s Mac but it’s too cumbersome to test over there so it’s a troubleshooting task on my machine for another day :stuck_out_tongue:

@ramatsu - I had looked at your published site in the other post you recently added and the console was throwing errors since the tooltip script you were adding to custom code (you were sharing it from another webflow published site) was shared with the http:// protocol versus https:// . Try updating your custom code link.

Does the webflow version support themes, animations, etc that are metioned on the Github page?

If you want themes and custom animation you need to understand JS code a bit and implement your own version of Tooltipster with your customisation. If you just want to change the look of the tooltips, it’s possible by adding a custom CSS code (details in this thread above).

@Maciej Thank you so much for making this resource available! Just what I was after (thanks to @dram for pointing me in the right direction).

I’m have just one small issue: after having changed the bg colour through the custom CSS you indicated in this thread I’m having issues with how the tooltip arrow displays. Any idea what I may have done wrong?

This is the code I currently have in the Custom Code section of the project settings:

<!--This is for the styling of tooltips /*-->
<style>
/*this bit let's you style the tooltip text*/  
.tooltipster-sidetip .tooltipster-content {
  color: #000000;
  font-family: sofia pro;
  font-size:0.75em;
  font-weight:400;
  line-height: 1;
  padding: 6px 14px;
}

.tooltipster-sidetip.tooltipster-borderless .tooltipster-box {
border: none;
border-radius:2px;
background: #ccb97a;
background: rgba(204, 185, 122, 1);
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-bottom .tooltipster-box {
margin-top: 8px;
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-left .tooltipster-box {
margin-right: 8px;
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-right .tooltipster-box {
margin-left: 8px;
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-top .tooltipster-box {
margin-bottom: 8px;
}

.tooltipster-sidetip.tooltipster-borderless .tooltipster-arrow {
height: 8px;
margin-left: -8px;
width: 16px;
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-left .tooltipster-arrow, .tooltipster-sidetip.tooltipster-borderless.tooltipster-right .tooltipster-arrow {
height: 16px;
margin-left: 0;
margin-top: -8px;
width: 8px;
}

.tooltipster-sidetip.tooltipster-borderless .tooltipster-arrow-background {
display: none;
}

.tooltipster-sidetip.tooltipster-borderless .tooltipster-arrow-border {
border: 8px solid transparent;
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-bottom .tooltipster-arrow-border {
background: #ccb97a;
background: rgba(204, 185, 122, 1);;
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-left .tooltipster-arrow-border {
background: #ccb97a;
background: rgba(204, 185, 122, 1);;
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-right .tooltipster-arrow-border {
background: #ccb97a;
background: rgba(204, 185, 122, 1);;
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-top .tooltipster-arrow-border {
background: #ccb97a;
background: rgba(204, 185, 122, 1);;
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-bottom .tooltipster-arrow-uncropped {
top: -8px;
}

.tooltipster-sidetip.tooltipster-borderless.tooltipster-right .tooltipster-arrow-uncropped {
left: -8px;
}
</style>  

Thanks! :slight_smile: