4

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.

1man
  • 5,216
  • 7
  • 42
  • 56
  • 1
    Do you get any errors in your console outside of a missing image if any? Your code works fine for me with and without a broken image in Firefox, Chrome and IE. [jsfiddle](https://jsfiddle.net/qb2osn4w/1/) – xorspark Aug 27 '16 at 03:09
  • Did you see my fiddle? The anchor tag is there. No errors. Works fine. – xorspark Aug 27 '16 at 03:39
  • @xorspark, sorry I missed your fiddle. Let me try my code again. Thank you anyway. – 1man Aug 27 '16 at 03:42
  • @xorspark, Thank you so much for your fiddle. I played with it and realized what is wrong with mine. The issue happens when my main "tooltip-container" is a hyperlink itself. I it makes sense to define it as a hyperlink or another tag that the client can focus on it using keyboard, otherwise it will have accessibility issues. Right? I'm going to update my question to include this point. – 1man Aug 27 '16 at 03:54
  • The .tooltip_templates class does not belong here. – Louis Ameline Aug 27 '16 at 05:20
  • @Evan, in order to address your concern, I got rid of the div with class="tooltip_templates" in my question. It does not work either. – 1man Aug 27 '16 at 10:26

2 Answers2

1

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/

Community
  • 1
  • 1
Josh Whitlow
  • 481
  • 6
  • 25
  • Thank you for your response. I added my JavaScript code. Also updated my question to clarify the exact situation that the issue happens. – 1man Aug 27 '16 at 04:00
  • I updated my answer based on the new information you gave me. Hopefully this solves the problem. – Josh Whitlow Aug 27 '16 at 12:39
  • first note that we should define the main tag as a hyperlink or another tag that the client can focus on using keyboard, otherwise I think it will have accessibility issues. Then what you answered means there is basically no way to add a hyperlink in the tooltip. Right? – 1man Aug 27 '16 at 13:57
0

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/

1man
  • 5,216
  • 7
  • 42
  • 56