Показать ту же подсказку qTip onclick, но только по одному

Я пытаюсь использовать qTip2, чтобы показать подсказку html-содержимого при щелчке любой ссылки с классом «bb». Когда вы нажимаете на любую ссылку с классом «bb», всплывающая подсказка открывает div с помощью класса «tooltiptext», и когда вы нажимаете другую ссылку с классом «bb» (или где-либо на странице), первая всплывающая подсказка закрывается, а вторая открывается выше эта ссылка (или только всплывающая подсказка закрывается, если вы не нажали на другую ссылку).Показать ту же подсказку qTip onclick, но только по одному

Мне удалось открыть и закрыть панель инструментов, но только вторая ссылка показывает содержимое html.

Любые идеи?

Большое спасибо!

<script> 
$(document).ready(function() 
{ 
    $('a.bb').each(function() { 
     $(this).qtip({ 
     show: 'click', 
     hide: 'unfocus', 
     content: { 
       text: $(this).next('.tooltiptext') 
      } 
    }); 
    }); 
}); 
</script> 

<style type="text/css"> 
    .tooltiptext{ 
    display: none; 
} 

<body> 
<a class="bb" href="#test">Click me!</a> 
<a class="bb" href="#test">Click me again!</a> 

<div class="tooltiptext"> 
    Complex <b>inline</b> <i>HTML</i> in your <u>config</u> 
</div> 
<!-- Qtip --> 
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css"> 
<script type="text/javascript" src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script> 
</body>

источник

2016-02-25 fsylothian

JQuery next() только принимает сразу после родного брата, так что для первого звена a он получает вторую и при фильтрации по классу .tooltipnext все, что вы получаете пустой выбор.

Лучший способ выбрать непосредственно по классу подсказке (или даже по идентификатору, как это должно быть уникальным) и получить его HTML-содержимое с html()

Нет необходимости использовать функцию each(), как qtip уже относится к все выбранные элементы.

Это должно выглядеть примерно так:

$(document).ready(function() { 
    $('a.bb').qtip({ 
     show: 'click', 
     hide: 'unfocus', 
     content: { 
      text: $('.tooltiptext').html() 
     } 
    }); 
});

чек скрипку здесь: https://jsfiddle.net/bafforosso/pr0utrh2/1/

источник

2016-02-25 13:39:59 bafforosso

Благодаря @bafforosso - это именно то, что мне нужно! – fsylothian

@fsylothian приветствую вас, рад, что это помогло – bafforosso

Показать ту же подсказку qTip onclick, но только по одному

ответ

Смежные вопросы