I don't know for what reason but in tooltipster html content won't display. I encoded the html, added the option in the script but still a string.

$(document).ready(function() {
  $('.tooltip').tooltipster({
    contentAsHTML: true,
    interactive: true,
  });
});

<script src=".1.1/jquery.min.js"></script>
<script src=".tooltipster.js"></script>
<link rel="stylesheet" href=".css">
<span title="&amp;lt;img src=&amp;quot;my-image.png&amp;quot; /&amp;gt; &amp;lt;strong&amp;gt; This text is in bold case !&amp;lt;/strong&amp;gt;" class="tooltip">Why is this not working</span>

I don't know for what reason but in tooltipster html content won't display. I encoded the html, added the option in the script but still a string.

$(document).ready(function() {
  $('.tooltip').tooltipster({
    contentAsHTML: true,
    interactive: true,
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://iamceege.github.io/tooltipster/js/jquery.tooltipster.js"></script>
<link rel="stylesheet" href="http://iamceege.github.io/tooltipster/css/tooltipster.css">
<span title="&amp;lt;img src=&amp;quot;my-image.png&amp;quot; /&amp;gt; &amp;lt;strong&amp;gt; This text is in bold case !&amp;lt;/strong&amp;gt;" class="tooltip">Why is this not working</span>

• javascript
• jquery
• html
• tooltipster

• try this jsfiddle/s38oja1q/1 – Sushil Commented Jun 26, 2015 at 22:18
• But I need it in html title not in JS. Because I need to generate it in a title. – Maverick Commented Jun 26, 2015 at 22:21
• 1 here's the updated version jsfiddle/s38oja1q/2 in html title – Sushil Commented Jun 26, 2015 at 22:21

1 Answer 1

Your title attribute has a bunch of instances of & where it should just be &.

For example, you have:

<img src="my-image.png" />

When it should be:

<img src="my-image.png" />

I'm not sure how you generated your title attribute, it looks like you may have escaped the string twice.

Working snippet:

$(document).ready(function() {
  $('.tooltip').tooltipster({
    contentAsHTML: true,
    interactive: true,
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://iamceege.github.io/tooltipster/js/jquery.tooltipster.js"></script>
<link rel="stylesheet" href="http://iamceege.github.io/tooltipster/css/tooltipster.css">
<span class="tooltip" title="&lt;img src=&quot;my-image.png&quot; /&gt; &lt;strong&gt; This text is in bold case !&lt;/strong&gt;">This is working</span>