当前位置:主页 > JavsScript库 > 通知 / 提示 >

轻量级的HTML5工具提示JavaScript库 - Tooltip.js
栏目分类:通知 / 提示   发布日期:2021-08-15   浏览次数:

一个轻量级的 JavaScript 库,用于在任何元素上创建可定制的动画 HTML5 工具提示。

如何使用它:

1. 首先,在页面上包含以下文件。

<link rel="stylesheet" href="dist/tooltip.min.css" />
<script src="dist/tooltip.min.js"></script>


2. 在data-tooltip属性中定义tooltip内容:

<button data-tooltip="Tooltip Content">
  悬停在我上面
</button>


3. 确定工具提示应该出现在哪个点。可能的值:

  • top

  • bottom

  • left

  • right

  • null (auto)

<button data-tooltip="Tooltip Content" data-tooltip-position="bottom">
  悬停在我上面
</button>


4. 确定工具提示与其触发元素之间的空间。默认值:4。

<button data-tooltip="Tooltip Content"
        data-tooltip-margin="10">
  悬停在我上面
</button>


5. 配置工具提示动画。

<button data-tooltip="Tooltip Content"
        data-tooltip-enter-delay="0"
        data-tooltip-exit-delay="0"
        data-tooltip-show-duration="300"
        data-tooltip-hide-duration="200"
        data-tooltip-transition-distance="200">
  悬停在我上面
</button>


6. 设置工具提示的 z-index。默认值:1。

<button data-tooltip="Tooltip Content"
        data-tooltip-z-index="999">
  悬停在我上面
</button>


7. 确定是否仅当元素文本被省略号部分隐藏时才显示工具提示。默认值:false。

<button data-tooltip="Tooltip Content"
        data-tooltip-ellipsis-only="true">
  悬停在我上面
</button>


8. 设置字体大小。默认值:14 像素。

<button data-tooltip="Tooltip Content"
        data-tooltip-font-size="12px">
  悬停在我上面
</button>


9. 设置工具提示的最大宽度。默认值:300 像素。

<button data-tooltip="Tooltip Content"
        data-tooltip-max-width="320px">
  悬停在我上面
</button>


10. 设置工具提示的对齐方式。默认值:'left'。

<button data-tooltip="Tooltip Content"
        data-tooltip-alignment="top right">
  悬停在我上面
</button>


11. 确定是否允许在tooltip文本中使用html元素。默认值:false。

<button data-tooltip="Tooltip Content"
        data-hide-on-click="false">
  悬停在我上面
</button>


12. 确定是否隐藏点击时的工具提示。默认值:true。

<button data-tooltip="Tooltip Content"
        data-tooltip-allow-html="true">
  悬停在我上面
</button>


13. 确定是否隐藏箭头图标。默认值:false。

<button data-tooltip="Tooltip Content"
        data-tooltip-hide-arrow-icon="true">
  悬停在我上面
</button>


14. 将其他 CSS 类应用于工具提示。

<button data-tooltip="Tooltip Content"
        data-tooltip-additional-classes="customClass">
  悬停在我上面
</button>


15. 以px为单位设置工具提示和窗口边缘之间的空间。默认值:5。

<button data-tooltip="Tooltip Content"
        data-tooltip-offset="6">
  悬停在我上面
</button>


官方网站:https://github.com/sa-si-dev/tooltip

相关热词: Tooltip.js工具提示

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库