I'm currently using Tooltipster for some tooltips. It works 'fine', when I place 'tooltip' class in the element (Ok, it's needed) and data-tooltip as well. My problem is that I want to give this element a HTML tooltip (aligned text and colours). From my search, I know we can do this:
$('.tooltip').tooltipster({
content: tooltipHTML,
contentAsHTML: 'true',
minWidth: 250
});
I'm sure the tooltipHTML is a valid HTML. Already tryed a $(tooltipHTML) as well. The problem is that Tooltipster is completly ignoring this options. No min-width is given (only forcing this by CSS - something I've done) and the content is not changed at all. I've replaced the data-tooltip content to this tooltipHTML but the problem is that the tooltip is not interpreted as HTML.
My HTML:
<div data-tooltip="{{this.locations}}" class="tooltip location__point location__point--client tooltipContainer " style="top: {{this.coordinates.y}}%; left: {{this.coordinates.x}}%;" data-locations="{{this.locations}}" data-timezones="{{this.timezones}}">
<span class="location__pointDot locattion__pointDot--client"></span>
</div>
Anyone knows any solution? Being on this for hours, trying soo many different solutions and nothing happens..
As you say you need to have the class tooltip in the element where you want you tooltip. Or just use another class, but then you need to call the right class in
$(".tooltip") or you own calss $("myToolTip")
See my fiddle to understand what I mean.