Tooltipster - jQuery 工具提示插件 - 工具提示内的链接或 HTML答案

【问题标题】：Tooltipster - jQuery tooltip plugin - link or HTML inside of the tooltipTooltipster - jQuery 工具提示插件 - 工具提示内的链接或 HTML
【发布时间】：2016-08-10 17:31:06
【问题描述】：

我需要配置工具提示以在链接悬停后显示链接，但是我无法通过 title 属性提取任何 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>

【问题讨论】：

标签： jquery plugins jquery-plugins tooltip

【解决方案1】：

根据他们的文档 (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>

【讨论】：

我已经尝试过这种方法，但问题是我在一张图片中有多个带有不同链接的锚点，并且由于某种原因它只抓取了所有锚点上的一个链接。
你能分享一下你使用不同链接的多个锚点的代码吗？
我将 id 更改为 class 并为每个 data-tooltip-content 使用不同的类，它按预期工作，不确定它是否是正确的方法，我确信有更好和更有效的方法来实现这一点，但它可以根据需要工作。
我在下面发布了一个答案。基本上你需要使用类而不是 id 并继续重用 em。

【解决方案2】：

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

【讨论】：