安装

可以通过npm来安装在Tippy.js插件。

npm install --save tippy.js

或者直接调用CDN上的js。

<script src="https://unpkg.com/tippy.js@2.2.3/dist/tippy.all.min.js"></script>

使用

我们需要为使用tooltip的元素设置一个title属性，这个属性中的内容就是tooltip的内容。

<button type="button" class="btn btn-success" title="Tooltip">鼠标滑上试下</button>
<button type="button" class="btn btn-info" title="这里是提示信息">按钮2</button>
<button class="btn btn-warning" title="<strong>文字粗体!</strong>">粗体</button>

然后直接调用：

tippy(\'button\');

运行，就可以看到效果。

如果我们要让Tippy支持HTML内容，可以设置关联模板：

<div id="myTemplate" style="display:none">
  <p>Fun <strong>non-interactive HTML</strong> here</p>
  <img alt="cat" height="150" src="img/cat.jpg">
</div>
<p><a href="#" id="linka">HTML内容</a></p>

然后这样来调用：

tippy(\'#linka\', {
  html: \'#myTemplate\',
  arrow: true,
  animation: \'fade\',
  distance: 15,
  arrowTransform: \'scale(2)\'
});

选项设置

我们可以在实例化Tippy对象时以对象的方式传入配置参数，例如：

tippy(\'.tippy\', { position: \'right\', animation: \'fade\' })

也可以在HTML中直接以data-*的方式来使用配置参数：

<button class="btn tippy" title="I\'m a tooltip!"
  data-animatefill="false"
  data-animation="scale"
  data-position="bottom">Overridden</button>

Tippy.js常用的主要配置参数如下：

事件方法

Tippy.js提供了5个可用的回调函数：

tippy(\'.btn\', {
  onShow() {
    // When the tooltip has been triggered and has started to transition in
  },
  onShown() {
    // When the tooltip has fully transitioned in and is showing
  },
  onHide() {
    // When the tooltip has begun to transition out
  },
  onHidden() {
    // When the tooltip has fully transitioned out and is hidden
  },
  wait(show, event) {
    // Delays showing the tooltip until you manually invoke `show()`
  }
})

更多关于Tippy.js tooltip工具提示插件的信息，请参考：https://github.com/atomiks/tippyjs

本文地址：https://www.stayed.cn/item/85

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我