0

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..

bmfteixeira
  • 124
  • 1
  • 12
  • Where do you find tooltipHTML in the tooltipser documentation? – Zorken17 Aug 29 '16 at 08:50
  • tooltipHTML is not a valid html elemnet – Zorken17 Aug 29 '16 at 08:55
  • Please add all the necessary code excerpt to your question. I see no `tooltip` class in your html for example. And `data-tooltip` is not part of the documentation. And make sure you use the latest version of the library. – Louis Ameline Aug 29 '16 at 08:59
  • @Zorken17 tooltipHTML is the variable where I'm storing the HTML to use in the tooltip. I try to place it in 'content' attribute of the Tooltipster. – bmfteixeira Aug 29 '16 at 09:08
  • @Evan you're right, this was made up by other developer. The truth is I can't find any hard coded stuff on the code to work with this attribute, but removing it no content at all is displaying in the tooltip. What you suggest to do on JS? – bmfteixeira Aug 29 '16 at 09:11
  • Your question does not make sense to me. I suggest you take a good read at the documentation and follow it step by step. – Louis Ameline Aug 29 '16 at 09:55

1 Answers1

0

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.

Zorken17
  • 1,896
  • 1
  • 10
  • 16