Streaming live at 10am (PST)

Tooltipster for Webflow - easy to use plugin for tooltips

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

@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

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

1 Like

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?

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

See updated demo website

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

1 Like

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