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:)
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.
@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.
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?
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.
@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:
… 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:
… so it seems like the tooltipster code is being entirely ignored in favor of some default one.
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).
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.
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
@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.
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?