Question

我需要配置工具提示，以便在其悬停时显示链接，但是我无法通过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>

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

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

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

2 个答案: