Плагин JQuery Tooltipster не показывает всплывающую подсказку с гиперссылкой в ​​html-содержимом

Я следовал инструкциям официального документа по адресу:

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

Все работало нормально. Единственная дополнительная вещь, которую я добавил, это тег «a» внутри содержимого следующим образом:

Вот html-код:

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

Вот код JavaScript:

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

Вот JSFiddle:

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

К сожалению, всплывающая подсказка ничего не показывает!

Примечание. Я тестировал его в последних версиях Chrome и IE.

Обновление:

Следуя за xorspark и скрипками Джоша Уитлоу, я понял, что эта проблема возникает только тогда, когда основным «контейнером всплывающей подсказки» является сама гиперссылка. Я думаю, имеет смысл определить его как гиперссылку или другой тег, на который клиент может сфокусироваться с помощью клавиатуры, иначе я думаю, что у него будут проблемы с доступностью.


javascript jquery tooltip jquery-plugins tooltipster
person 1man    schedule 27.08.2016    source источник
comment
Получаете ли вы какие-либо ошибки в своей консоли, кроме отсутствующего изображения, если таковые имеются? Ваш код отлично работает для меня с неработающим изображением и без него в Firefox, Chrome и IE. jsfiddle   -  person xorspark    schedule 27.08.2016
comment
Ты видел мою скрипку? Тег привязки есть. Нет ошибок. Работает отлично.   -  person xorspark    schedule 27.08.2016
comment
@xorspark, извини, я пропустил твою скрипку. Позвольте мне попробовать мой код еще раз. Все равно спасибо.   -  person 1man    schedule 27.08.2016
comment
@xorspark, большое спасибо за вашу скрипку. Я поиграл с ним и понял, что со мной не так. Проблема возникает, когда мой основной контейнер всплывающей подсказки сам является гиперссылкой. Я имею смысл определить его как гиперссылку или другой тег, на который клиент может сфокусироваться с помощью клавиатуры, иначе у него будут проблемы с доступностью. Верно? Я собираюсь обновить свой вопрос, чтобы включить этот момент.   -  person 1man    schedule 27.08.2016
comment
Класс .tooltip_templates здесь неуместен.   -  person Louis Ameline    schedule 27.08.2016
comment
@ Эван, чтобы решить вашу проблему, я избавился от div с class = tooltip_templates в своем вопросе. Это тоже не работает.   -  person 1man    schedule 27.08.2016

Ответы (2)


arrow_upward
1
arrow_downward

Ваша проблема в том, что у вас есть вложенный якорь внутри вашего якоря. Хотя это может быть возможным, я настоятельно рекомендую удалить внутренний тег привязки или оставить только внутренний тег привязки и сделать контейнер диапазоном.

Как видно из этого поста, даже если вам удастся заставить его работать, он все равно закроет родительский якорь до появления дочернего якоря, что, вероятно, приводит к тому, что всплывающая подсказка перестает работать.

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://jsfiddle.net/h6Lrvqay/1/

person Josh Whitlow    schedule 27.08.2016
comment
Благодарю за ваш ответ. Я добавил свой код JavaScript. Также обновил мой вопрос, чтобы уточнить точную ситуацию, в которой возникает проблема. - person 1man; 27.08.2016
comment
Я обновил свой ответ на основе новой информации, которую вы мне дали. Надеюсь, это решит проблему. - person Josh Whitlow; 27.08.2016
comment
во-первых, обратите внимание, что мы должны определить основной тег как гиперссылку или другой тег, на котором клиент может сосредоточиться с помощью клавиатуры, иначе я думаю, что у него будут проблемы с доступностью. Тогда то, что вы ответили, означает, что нет возможности добавить гиперссылку во всплывающую подсказку. Верно? - person 1man; 27.08.2016

arrow_upward
0
arrow_downward

После беспокойства Джоша Уитлоу о вложенном якоре я думаю, что нашел решение для этого:

Мы должны определить «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/

person 1man    schedule 27.08.2016