Tooltipster - jQuery工具提示插件 - 工具提示中的鏈接或HTML

我需要配置工具提示來顯示鏈接一旦其徘徊，但我無法通過標題屬性拉入任何html。Tooltipster - jQuery工具提示插件 - 工具提示中的鏈接或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

我將id更改爲class，併爲每個data-tooltip-content使用不同的類，並且它按預期工作，不確定它是否是正確的方法，並且我確定有更好更高效的方法來實現此目的，但它起作用如所須。 – 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工具提示插件 - 工具提示中的鏈接或HTML

回答

相關問題