Подсказка пользовательского интерфейса jQuery должна отображать Div вместо атрибута title

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

Пример Fiddle покажет мою проблему:

Пример скрипта

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

Образец:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="toolTipHTML" data-ttcontent="help1_content" title="test 1">Help 1</span>
<span class="toolTipHTML" data-ttcontent="help2_content" title="test 2">Help 2</span>

<div class="help1_content">
  Text for Help 1 goes here!
  <br>Lorem
  <br>Ipsum
</div>

<div class="help2_content">
  Text for Help 1 goes here!
  <br>Lorem
  <br>Ipsum
</div>

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


jquery jquery-ui jquery-ui-tooltip
person JonSnow    schedule 08.12.2016    source источник
comment
проверьте jqueryui.com/tooltip/#custom-content   -  person Hudhaifa Yoosuf    schedule 08.12.2016
comment
Спасибо, я видел это, но не смог создать рабочее решение с данной информацией :-/   -  person JonSnow    schedule 08.12.2016

Ответы (1)


arrow_upward
2
arrow_downward

Обновленная скрипта.

Вы можете использовать опцию content для этой цели:

$('.toolTipHTML').tooltip({
  show: { duration: 0 },
  hide: { effect: "fade", duration: 100 },
  position: { my: "left top", at: "left bottom" },
  content: function() {
    return $('.'+$( this ).attr('data_ttcontent')+'_content').html();
  }
});

Надеюсь, это поможет.

person Zakaria Acharki    schedule 08.12.2016