tippy.js - 好用的tooltip提示插件使用详解4（显示html内容、AJAX获取数据）

2018-10-23 发布：hangge 阅读：992

十二、显示 html 内容

1，基本用法

（1）在前面文章中，我们 tooltip 里显示的都是普通文字。其实它也是可以支持更复杂的 html 样式内容的：

<button data-tippy="欢迎访问 <strong style='color:orange;'>hangge.com</strong> !">tooltip</button>

（2）效果图如下：

2，添加交互行为

（1）如果需要与 tooltip 里的内容进行交互，比如：点击里面的按钮执行相应的方法。那么就要将 interactive 属性设置为 true：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet"href="tippy.css">
    <script src='tippy.all.js'></script>
  </head>
  <body style="padding:170px">
    <button id="btn1">tooltip</button>
  </body>
  <script type="text/javascript">
    window.onload=function(){
      //显示的html内容
      var content = "欢迎访问 <strong style='color: orange;'>hangge.com</strong> !<br>"
        + "<button onclick='confirm()'>确定</button>";

      //tooltip初始化
      tippy('#btn1', {
       content: content,
       interactive: true
      });
     }

     //tooltip确定按钮点击
     function confirm() {
       //关闭tooltip标签
       var btn = document.getElementById("btn1");
       var tip = btn._tippy;
       tip.hide();
     }
  </script>
</html>

（2）效果图如下：

提示标签中除了有使用样式的文字外，还添加了个“确定”按钮。
当点击“确定”按钮后，自动将提示标签隐藏。

3，使用 html 模板

（1）如果提示标签的 html 内容比较复杂，还通过拼接字符串的方式来设置 content 值的话就会十分烦琐，且难以阅读和维护。

（2）我们可以直接将页面上的元素作为 tooltip 的 content 值（绑定后该元素不会继续在页面上显示）,下面代码实现的效果同上面是一样的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet"href="tippy.css">
    <script src='tippy.all.js'></script>
  </head>
  <body style="padding:170px">
    <button id="btn1">tooltip</button>
    <div id="myTemplate">
      欢迎访问 <strong style='color: orange;'>hangge.com</strong> !
      <br>
      <button onclick='confirm()'>确定</button>
    </div>
  </body>
  <script type="text/javascript">
    window.onload=function(){
      //tooltip初始化
      tippy('#btn1', {
       content: document.getElementById("myTemplate"),
       interactive: true
      });
     }

     //tooltip确定按钮点击
     function confirm() {
       //关闭tooltip标签
       var btn = document.getElementById("btn1");
       var tip = btn._tippy;
       tip.hide();
     }
  </script>
</html>

十三、通过 Ajax 获取提示标签数据

有时 tooltip 内容并不是固定写死的，而是需要通过后台请求来动态获取的。下面通过样例演示这个功能如何实现。

1，样例代码

（1）我们在提示标签显示的时候通过 ajax 去获取数据，等获取完毕后将内容设置进来。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet"href="tippy.css">
    <script src='tippy.all.js'></script>
    <script src='js/jquery.js'></script>
  </head>
  <body style="padding:170px">
    <button id="btn1">tooltip</button>
  </body>
  <script type="text/javascript">
    window.onload=function(){
      //tooltip初始化
      tippy('#btn1', {
           content: "正在加载....",
           async onShow(tip) {
             //显示时通过ajax加载tip内容
             $.ajax({ url: "tipData.php", success: function(data){
                tip.setContent(data);
             }});
          },
          onHidden(tip) {
            tip.setContent("正在加载....")
          }
      });
    }
  </script>
</html>

（2）tipData.php 代码如下，为了让效果更加明显，我在返回结果前等待个 2 秒钟。

<?
sleep(2);
echo "欢迎访问 hangge.com";
?>

2，效果图

提示标签出现时首先显示“正在加载....”字样，同时在后台发起请求。
当数据请求成功后，会将返回的结果显示在提示标签中。