jQuery工具提示插件-工具提示内部的链接或HTML

我需要配置工具提示显示链接，一旦它的悬停，但是，我无法通过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>

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

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

相关内容

最新更新

热门标签：