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: