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

轻量级富文本工具提示库 - creativa-tooltip
栏目分类:通知 / 提示   发布日期:2021-08-18   浏览次数:

一个轻量级、完全可配置、移动兼容、富文本工具提示 JavaScript 库。

如何使用它:

1. 下载creativa-tooltip.js库并导入到文档中。

<script src="./creativa-tooltip.js" type="text/javascript"></script>


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

<a href="https://www.html369.cn" ct-tooltip="跳转到www.html369.cn<br><i>Test HTML</i>">
  www.html369.cn
</a>

3. 就是这样。您可以使用以下ct-tooltip-position属性配置工具提示的位置:

  • top(默认)

  • right

  • bottom

  • left

<a href="https://www.html369.cn"
   ct-tooltip="跳转到www.html369.cn<br><i>Test HTML</i>"
   ct-tooltip-postition="right">
   www.html369.cn
</a>

4. 通过覆盖 .xml 文件中的默认参数来自定义工具提示creativa-tooltip.js。

static settings = {
  animationSpeed: 100,
  openAnimationDelay: 150,
  borderRadius: '5px',
  backgroundColor: '#000',
  color: '#fff',
  fontSize: '12px',
  fontWeight: 500,
  lineHeight: '16px'
}



官方网站:https://github.com/molloeduardo/creativa-tooltip

相关热词: Creativatooltip工具提示

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