Plugin JQuery Tooltipster tidak menampilkan tooltip dengan hyperlink di konten html

Saya mengikuti instruksi dokumen resmi di:

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

Semuanya bekerja dengan baik. Satu-satunya hal tambahan yang saya tambahkan adalah tag 'a' di dalam konten sebagai berikut:

Berikut kode htmlnya:

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

Berikut ini kode JavaScriptnya:

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

Ini JSFiddlenya:

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

Sayangnya tooltip tidak menunjukkan apa pun!

Catatan: Saya mengujinya di Chrome dan IE versi terbaru.

Pembaruan:

Mengikuti biola xorspark dan Josh Whitlow, saya menyadari bahwa masalah ini hanya terjadi ketika "wadah tooltip" utama adalah hyperlink itu sendiri. Saya rasa masuk akal untuk mendefinisikannya sebagai hyperlink atau tag lain sehingga klien dapat memfokuskannya menggunakan keyboard, jika tidak, menurut saya akan ada masalah aksesibilitas.


javascript jquery tooltip jquery-plugins tooltipster
person 1man    schedule 27.08.2016    source sumber
comment
Apakah Anda mendapatkan kesalahan apa pun di konsol Anda selain gambar yang hilang, jika ada? Kode Anda berfungsi dengan baik untuk saya dengan dan tanpa gambar rusak di Firefox, Chrome, dan IE. jsfiddle   -  person xorspark    schedule 27.08.2016
comment
Apakah kamu melihat biolaku? Tag jangkar ada di sana. Tidak ada kesalahan. Berfungsi dengan baik.   -  person xorspark    schedule 27.08.2016
comment
@xorspark, maaf saya melewatkan biola Anda. Biarkan saya mencoba kode saya lagi. Terima kasih.   -  person 1man    schedule 27.08.2016
comment
@xorspark, Terima kasih banyak atas biola Anda. Saya memainkannya dan menyadari apa yang salah dengan milik saya. Masalah terjadi ketika wadah tooltip utama saya adalah hyperlink itu sendiri. Saya masuk akal untuk mendefinisikannya sebagai hyperlink atau tag lain sehingga klien dapat fokus menggunakan keyboard, jika tidak maka akan ada masalah aksesibilitas. Benar? Saya akan memperbarui pertanyaan saya untuk memasukkan poin ini.   -  person 1man    schedule 27.08.2016
comment
Kelas .tooltip_templates tidak termasuk di sini.   -  person Louis Ameline    schedule 27.08.2016
comment
@Evan, untuk mengatasi kekhawatiran Anda, saya menghilangkan div dengan class=tooltip_templates di pertanyaan saya. Itu juga tidak berhasil.   -  person 1man    schedule 27.08.2016

Jawaban (2)


arrow_upward
1
arrow_downward

Masalah Anda adalah Anda memiliki jangkar yang bersarang di dalam jangkar Anda. Meskipun mungkin ini bisa dilakukan, saya sangat menyarankan untuk menghapus tag jangkar bagian dalam, atau hanya memiliki tag jangkar bagian dalam dan membuat penampung menjadi span.

Seperti yang terlihat di postingan ini, meskipun Anda berhasil membuatnya berfungsi, itu tetap akan menutup jangkar induk sebelum jangkar anak muncul, yang mungkin menyebabkan tooltip berhenti bekerja.

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

File yang akan disertakan:

Biola yang Bekerja:

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

person Josh Whitlow    schedule 27.08.2016
comment
Terima kasih atas tanggapan Anda. Saya menambahkan kode JavaScript saya. Juga perbarui pertanyaan saya untuk memperjelas situasi sebenarnya di mana masalah tersebut terjadi. - person 1man; 27.08.2016
comment
Saya memperbarui jawaban saya berdasarkan informasi baru yang Anda berikan kepada saya. Semoga ini menyelesaikan masalah. - person Josh Whitlow; 27.08.2016
comment
catatan pertama bahwa kita harus mendefinisikan tag utama sebagai hyperlink atau tag lain sehingga klien dapat fokus menggunakan keyboard, jika tidak, menurut saya akan ada masalah aksesibilitas. Lalu apa yang Anda jawab berarti pada dasarnya tidak ada cara untuk menambahkan hyperlink di tooltip. Benar? - person 1man; 27.08.2016

arrow_upward
0
arrow_downward

Mengikuti kekhawatiran Josh Whitlow tentang jangkar bersarang, saya rasa saya menemukan solusi untuk ini:

Kita harus mendefinisikan "tooltip_content" di luar "tooltip-container"?

Berikut kode htmlnya:

<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="/id#"></a><img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
   </span>
</div>

Berikut ini kode JavaScriptnya:

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

Ini JSFiddlenya:

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

person 1man    schedule 27.08.2016