JQuery Tooltipster plugin does not show hint with hyperlink in html content

Question

I followed the instructions of the white papers at:

http://iamceege.imtqy.com/tooltipster/#htmlcontentalt

Everything worked fine. The only thing I added was adding the 'a' tag inside the content as follows:

Here is the html code:

<a class="tooltip-container">
    This div has a tooltip with HTML when you hover over it!
    <span class="tooltip_content">
      <a href="#"></a><img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
    </span>
</a>

Here is the JavaScript code:

$('.tooltip-container').tooltipster({
  functionInit: function (instance, helper) {
    var content = $(helper.origin).find('.tooltip_content').detach();
    instance.content(content);
  }
});

Here is the JSFiddle:

https://jsfiddle.net/c3ddf8bm/7/

Unfortunately, the tooltip doesn’t show anything!

Note. I tested it in modern versions of Chrome and IE.

Update:

xorspark Josh Whitlow , , "-" . , , , , .

Answer 1

, . , , .

, , , , , .

HTML:

<div class="tooltip_templates">
<a class="tooltip-container">
  This div has a tooltip with HTML when you hover over it!
  <span class="tooltip_content">
    <img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
  </span>
</a>

JavaScript:

$(document).ready(function() {
  $('.tooltip-container').tooltipster({
    functionInit: function (instance, helper) {
      var content = $(helper.origin).find('.tooltip_content').detach();
      instance.content(content);
    }
  });
});

:

• https://github.com/iamceege/tooltipster

• https://developers.google.com/speed/libraries/

:

https://jsfiddle.net/h6Lrvqay/1/

Answer 2

, , , :

"tooltip_content" "tooltip-container"?

html:

<div class="tooltip-parent">
   <a class="tooltip-container">
      This div has a tooltip with HTML when you hover over it!
   </a>
   <span class="tooltip_content">
      <a href="#"></a><img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
   </span>
</div>

JavaScript:

$('.tooltip-container').tooltipster({
  functionInit: function (instance, helper) {
    var content = $(helper.origin).parent().find('.tooltip_content').detach();
    instance.content(content);
  }
});

JSFiddle:

https://jsfiddle.net/c3ddf8bm/8/