Tooltipster - jQuery tooltip plugin - ссылка или HTML внутри подсказки

Мне нужно настроить всплывающую подсказку для отображения ссылки после ее зависания, , однако мне не удалось извлечь какой-либо атрибут html через заголовок.Tooltipster - jQuery tooltip plugin - ссылка или HTML внутри подсказки

вот код:

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="js/tooltipster.bundle.min.js"></script> 
    <link href="css/tooltipster.bundle.min.css" rel="stylesheet" /> 
</head> 

<body> 

    <img src="img/plus-ico.png" class="tooltip" title="content that is displayed in tooltip without link" /> 
    <a href="link_to_other_content_or_page">Link which is preffered in tooltip</a> 
    <img src="img/1.jpg" /> 

    <script> 
     $(document).ready(function(){ 
      $('.tooltip').tooltipster({ 

       interactive: true, 
       contentAsHTML: true 
       //I tried above option contentAsHTML and and adding <a href="#"> to title attribute but i think its depreciated. 

      }); 
     }); 
    </script> 

</body>

источник

2016-08-10 lvekua

Согласно их документации (http://iamceege.github.io/tooltipster/#getting-started), Вам нужно будет использовать data-tooltip-content атрибут, чтобы указать на якорь элемент.

Вам также потребуется обернуть некоторый элемент HTML вокруг этого тега привязки и установить его свойство display CSS в none.

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="js/tooltipster.bundle.min.js"></script> 
    <link href="css/tooltipster.bundle.min.css" rel="stylesheet" /> 
    <style> 
     .TooltipWrapper {display: none} 
    </style> 
</head> 

<body> 

    <img src="img/plus-ico.png" class="tooltip" data-tooltip-content="#TooltipLink" /> 
    <div class="TooltipWrapper"> 
     <a id="TooltipLink" href="link_to_other_content_or_page">Link which is preffered in tooltip</a> 
    </div> 
    <img src="img/1.jpg" /> 

    <script> 
     $(document).ready(function(){ 
      $('.tooltip').tooltipster({ 
       interactive: true, 
       contentAsHTML: true 
      }); 
     }); 
    </script> 

</body> 
</html>

источник

2016-08-10 17:46:47 Chitrang

Я попробовал этот подход, но проблема в том, у меня есть несколько якорей с различными ссылками на одном изображении и это по какой-то причине захватывает только одно звено на всех якорях. – lvekua

Можете ли вы поделиться кодом, в котором вы используете несколько якорей с разными ссылками? – Chitrang

Я изменил идентификатор на класс и использовал разные классы для каждого содержимого-подсказки, и он работает как ожидалось, не уверен, что его правильный подход, и я уверен, что есть лучший и эффективный способ достичь этого, но он работает по мере необходимости. – lvekua

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="js/tooltipster.bundle.min.js"></script> 
<link rel="stylesheet" href="css/tooltipster.bundle.min.css"> 


<style> 
    .TooltipWrapper{display: none;} 
</style>

<!-- first tooltip --> 
<img src="plus-ico.png" class="tooltip" data-tooltip-content=".TooltipLink" /> 
<div class="TooltipWrapper"> 
    <a class="TooltipLink" href="#">Link which is preffered in tooltip</a> 
</div> 

<!-- second tooltip --> 
<img src="plus-ico.png" class="tooltip" data-tooltip-content=".TooltipLink2" /> 
<div class="TooltipWrapper"> 
    <a class="TooltipLink2" href="#">Link which is preffered in tooltip</a> 
</div> 
<img src="myimage.png" /> 

<script> 
    $(document).ready(function(){ 
     $('.tooltip').tooltipster({ 
      interactive: true, 
      //contentAsHTML: true 
     }); 
    }); 
</script>

источник

2016-08-10 20:57:01 lvekua

Tooltipster - jQuery tooltip plugin - ссылка или HTML внутри подсказки

ответ

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