ปลั๊กอิน JQuery Tooltipster ไม่แสดงคำแนะนำเครื่องมือพร้อมไฮเปอร์ลิงก์ในเนื้อหา html

ปัญหาของคุณคือคุณมีสมอซ้อนกันอยู่ภายในสมอของคุณ แม้ว่า อาจ เป็นไปได้ แต่ฉันขอแนะนำให้ลบแท็ก Anchor ด้านในออก ไม่เช่นนั้นจะมีเพียงแท็ก Anchor ด้านในและทำให้คอนเทนเนอร์มีช่วงขยาย

ดังที่เห็นในโพสต์นี้ แม้ว่าคุณจะจัดการเพื่อให้มันใช้งานได้ แต่ก็ยังคงปิด จุดยึดหลักก่อนที่จุดยึดลูกจะปรากฏขึ้น ซึ่งอาจเป็นสาเหตุที่ทำให้คำแนะนำเครื่องมือหยุดทำงาน

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/

จากความกังวลของ Josh Whitlow เกี่ยวกับสมอที่ซ้อนกัน ฉันคิดว่าฉันพบวิธีแก้ปัญหาสำหรับสิ่งนี้:

เราควรกำหนด "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="/th#"></a><img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
   </span>
</div>

นี่คือรหัสจาวาสคริปต์:

$('.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/