在创建网站和web应用程序时，工具提示和弹出窗口是两种非常常用的、可定制的交互式视觉元素。它们使用鼠标交互在用户界面组件上显示信息或触发某些事件。

serialtip是一个轻量级的jQuery插件，用于轻松创建动画、可自定义的富文本工具提示和弹出窗口，这些工具提示和窗口在悬停或单击时显示在任何HTML元素上。

如何使用它:

1.在文档中加载jQuery库和serialtip插件的文件。

<link rel="stylesheet" href="/path/to/dist/jquery.serialtip.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.serialtip.min.js"></script>

2.将您的内容添加到DIV容器中。请注意，每个工具提示或弹出窗口必须使用数据串行提示目标属性

<div data-serialtip-target="example" class="serialtip-default">
  <!-- Close Button -->
  <span class="serialtip-close"></span>
  <h5 class="serialtip-title">Tooltip/Popover Title</h5>
  <p>Tooltip/Popover Content</p>
</div>

3.将工具提示/弹出窗口附加到您指定的元素。

<span data-serialtip="example">
  Hover/Click Me
</span>

4.将插件初始化为popover。

$(function(){
  $('[data-serialtip]').serialtip();
});

5.将插件初始化为工具提示。

$(function(){
  $('[data-serialtip]').serialtip({
    event: 'hover',
  });
});

6.创建自己的主题。

.serialtip-custom {
  padding: 30px;
  background-color: #fff;
  box-shadow: 5px 5px 35px 5px rgba(0, 0, 0, .1);
  font-size: 14px;
  color: #666;
}

.serialtip-custom:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: solid transparent;
}

.serialtip-custom.is-placement-bottom:before {
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 0 6px 6px 6px;
  border-bottom-color: #fff;
}

<div data-serialtip-target="example" class="serialtip-custom">
  <!-- Close Button -->
  <span class="serialtip-close"></span>
  <h5 class="serialtip-title">Tooltip/Popover Title</h5>
  <p>Tooltip/Popover Content</p>
</div>

7.设置工具提示的位置。

• 顶部/左侧
• 顶部/中心
• 顶部/右侧
• 右侧/顶部
• 右侧/中间
• 右侧/底部
• 底部/左侧
• 底部/中心
• 底部/右侧
• 左侧/顶部
• 左/中
• 左侧/底部

$(function(){
  $('[data-serialtip]').serialtip({
    position: 'bottom center', // default
  });
});

8.设置触发工具提示/弹出窗口之前的等待时间。默认值：300ms。

$(function(){
  $('[data-serialtip]').serialtip({
    delay: 100,
  });
});

9.更多插件选项。

$(function(){
  $('[data-serialtip]').serialtip({

    // CSS class for close button
    closeClass: 'serialtip-close',

    // CSS class for active tooltip/popover
    activeClass: 'is-active',

    // Function to get the target tooltip/popover 
    getTarget: function($trigger){
      const target = $trigger.data('serialtip');
      return $('[data-serialtip-target="'+ target +'"]');
    }

  });
});

预览截图

动画富文本工具提示和Popover插件 jQuery serialtip