Streaming live at 10am (PST)

Tooltipster for Webflow - easy to use plugin for tooltips


#22

It is possible, but you need to modify the configuration for tooltipster, which is not really supported by my little snippet (yet).
I’m afraid for more customization you need to learn to use tooltipster library on your own.
To achieve your goal you need to have contentAsHTML property set in the configuration of tooltipster


#23

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.


#24

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


#25

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!


#26

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>

#27

Thank you very much!


#28

@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…


#29

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


#30

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
http://tooltipster-for-webflow.webflow.io/
Use the new code from the updated tutorial and let me know if tapping on mobile works now.


#31

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


#32

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.


#33

Great job @Maciej

Thanks for sharing with the community! :webflow_heart: