Hi everyone!
I prepared an easy to use extension to Webflow, that lets you add a simple generic tooltip to any element without leaving the Designer interface.
Read more here: http://tooltipster-for-webflow.webflow.io/
Quick info:
You can simply add tooltips via custom attributes
After publish, the tooltip will work on any element
This is very cool can’t wait to try it out.
Nice work! Looking forward to using it on a project sometime…
Hi Maciej
Is it possible to use any of the Tooltipster customisation?
I want to be able to change the colour of the tooltip boxes.
Thanks
Yes, you can add custom code to webflow and override default css styles. Let me know if you need an example.
You can style the tooltips by custom code. In Webflow paste this code into the “before body” custom code section inside global settings of your site. Then modify the parameters in this code, for example background color, shadows etc. Don’t forget to style the tooltip tip as well - you need to change the border colors to achieve this. The below code will make your tooltips red.
<style>
.tooltipster-sidetip.tooltipster-borderless .tooltipster-box {
border: none;
background: #ff0000;
background: rgba(255, 0, 0, 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 {
border-bottom-color: #ff0000;
border-bottom-color: rgba(255, 0, 0, 1);;
}
.tooltipster-sidetip.tooltipster-borderless.tooltipster-left .tooltipster-arrow-border {
border-left-color: #ff0000;
border-left-color: rgba(255, 0, 0, 1);;
}
.tooltipster-sidetip.tooltipster-borderless.tooltipster-right .tooltipster-arrow-border {
border-right-color: #ff0000;
border-right-color: rgba(255, 0, 0, 1);;
}
.tooltipster-sidetip.tooltipster-borderless.tooltipster-top .tooltipster-arrow-border {
border-top-color: #ff0000;
border-top-color: rgba(255, 0, 0, 1);;
}
.tooltipster-sidetip.tooltipster-borderless.tooltipster-bottom .tooltipster-arrow-uncropped {
top: -8px;
}
.tooltipster-sidetip.tooltipster-borderless.tooltipster-right .tooltipster-arrow-uncropped {
left: -8px;
}
</style>
@Maciej The link doesn’t work for me, has it changed?
I think that webflow had temporary issues with servers.
Is it possible to pull the tooltip content in from a CMS field? We can’t grab that from the custom div attributes, wondering if there’s a workaround here. Thanks!
If i’m not mistaken, you can map a CMS field to any text box, right?
So it’s possible to workaround using additional jQuery code.
$('.product-box').each(function() {
var thisTooltipText = $(this).find('.tooltip-content').text();
$(this).find('.question-mark-tooltip-trigger').attr('title', thisTooltipText);
});
You need to place this code before initialising tooltipster (that means above the “tooltipster-for-webflow” custom script in Webflow custom code box). If that’s not possible, you can anyway reinit it by running tooltipster_init()
Hope that works, if not I’m sure we can figure this out.
This is a really helpful tool, @Maciej. Thanks for making it available!
Is there a way to change the offset of the tooltip? Currently I’m using it on a table at the bottom of this page, and it shows up centered on the row, while I’d like it to be over on the left where my “info” icons appear.
Thanks in advance.
Offset is not going to help here, since you have a flexible layout. I think you need a different workaround. You need to attach the tooltip to the icon container, but trigger it appearing when hovering over the whole row. This will also work better on mobile since people may want to click the info icon to show the tooltip.
So you’ll need to do 2 things:
Instead of adding tooltipster=top and title attrubitues on the “table-row” element, add them on the info icon img
Add this jQuery code in your custom code section, after the tooltipster initialisation
$(document).on('mouseover', '.table-row', function() {
$(this).find('[tooltipster]').tooltipster('show');
});
$(document).on('mouseleave', '.table-row', function() {
$(this).find('[tooltipster]').tooltipster('hide');
});
It worked for me when I tested this on you website in the console.
Let me know if it worked for you.
This worked perfectly and was easy to implement. I want to complement you again on this useful tool. Thanks! I hope to one day be expert enough with Webflow to be able to offer help to others this way.
I hope you’ll consider adding this option to your original tutorial, so others may use it too.
@Maciej hello,
I am having trouble with your solution. Probably because I have never used attributes and am doing it wrong.
Could you send a screenshot of how you insert the code into the attribute area, please?
If I add tooltipster=“top” into the value, I have to add a name. Then it does not read tooltipster=“top”, as it does in your screenshot. It shows the title I add + tooltipster=“top”: 
What am I doing wrong?
Thanks so much for your help.
Jest Enter “tooltipster” in the top field and “top” in the bottom field.
(Without quotation marks).
ooooohhhhhh.
Thanks 
Hi @Maciej, I have another question.
I got the tooltips working and they’re great on desktop. On mobile, however, they only work sometimes.
The first one works perfectly, but all the subsequent ones I click either don’t work at all or only work after 4-5 clicks.
Any idea how to rectify this?
Thanks!
Can you share a link to your website with this problem?
Sure, it’s bonjour-sante.webflow.io/abonnements-v2
Thank you!
@Maciej hello!
I have another question regarding your tooltips.
Is there any way to insert a link in the text? I tried adding some code but obviously that didn’t work.
Thanks!