CODEWITHSUNDEEP
javascriptjqueryjquery-pluginstooltiptooltipster
1man
1man

Reputation: 5654

JQuery Tooltipster plugin does not show the tooltip with a hyperlink in the html content

I followed the official document's instructions at:

http://iamceege.github.io/tooltipster/#htmlcontentalt

Everything worked fine. The only extra thing that I added wa an '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 shows nothing!

Note: I tested it in up-to-date versions of Chrome and IE.

Update:

Following xorspark and Josh Whitlow's fiddles, I realized that this issue only happens when the main "tooltip-container" is a hyperlink itself. I think it makes sense to define it as a hyperlink or another tag that the client can focus on it using keyboard, otherwise I think it will have accessibility issues.

Upvotes: 4

Views: 2692

Answers (2)

1man
1man

Reputation: 5654

Following Josh Whitlow's concern about the nested anchor, I think I found a solution for this:

We should define "tooltip_content" outside "tooltip-container"?

Here is the html code:

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

Here is the JavaScript code:

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

Here is the JSFiddle:

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

Upvotes: 0

Josh Whitlow
Josh Whitlow

Reputation: 481

Your problem is that you have a nested anchor within your anchor. While this may be possible, I highly recommend removing the inner anchor tag, or else only have an inner anchor tag and make the container a span.

As seen in this post, even if you do manage to get it to work, it will still close the parent anchor before the child anchor appears, which is likely what's causing the tooltip to stop working.

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);
    }
  });
});

Files to include:

Working Fiddle:

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

Upvotes: 1

Related Questions