Tooltipster for Webflow - easy to use plugin for tooltips

Community resources Webflow Tips
42

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

40
402212×888 139 KB

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:

43

@Chiaradesignsthings the tips of the tooltip are CSS triangles which are styled by border-color (you can google for more details). Therefore you need to add custom code that overrides the specific border color for the tip, for example

.tooltipster-sidetip.tooltipster-borderless.tooltipster-top .tooltipster-arrow-border {
  border-top-color: #ccb97a;
}

Also see the my screenshot from Chrome console

48
482862×1016 291 KB

Don’t forget to add custom code for all positions of the tip: top, right, bottom, left

1 Like
44

Hey @Maciej thank you for the explanation. Basically, I understood that what I was doing wrong is that I was using code from a post back in Feb '17 with the border color specified twice :sweat_smile: Like this:

.tooltipster-sidetip.tooltipster-borderless.tooltipster-top .tooltipster-arrow-border {
border-top-color: #ff0000;
border-top-color: rgba(255, 0, 0, 1);;

}

Removing the second color specification (the rgba one) did the trick!

Thanks so much for the help!!! :smile:

Also, since I’ve got you on this thread, would it be possible to have the tooltips trigger on click rather than on hover?

45

@Chiaradesignsthings I updated my code as you requested, so that it is possible to have tooltips on click.

See updated demo website

28
281754×680 14 KB

Don’t forget that clickable elements should have cursor set to “pointer”, otherwise the interaction won’t work on iOS.

1 Like
46

Thanks @Maciej, you absolute rockstar!!! Works great :raised_hands:

47

You have my gratitude :clap:

Your plugin has helped me a lot. Thank you for sharing. :slightly_smiling_face:

48

:point_right: [Cloneable] Native Webflow Tooltips

tooltip

Dropping this here in case folks are looking for a 100% native Webflow approach that’s easy to maintain. Hope it helps!

1 Like
49

I seem to not find if this also works with links in rich-text fields.
You cannot add a ‘span’ in there.

Since i only use those, i need tooltips, that are generated from the link (and preferably with the title + og-media from the target link, to populate the tooltip).