提示对话框-Bootstrap tooltip工具提示插件

这是一款Bootstrap tooltip工具提示修改主题样式插件。通过该插件,可以修改bootstrap3和bootstrap4的内置tooltip主题样式,生成各种颜色的漂亮的tooltip工具提示。

使用方法

在页面中引入bootstrap文件,jquery以及对应版本的bootstrap-tooltip-custom-class.css和bootstrap-tooltip-custom-class.js文件。

<link rel="stylesheet" href="css/bootstrap-tooltip-custom-class.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min..js""></script>
<script src="js/bootstrap-tooltip-custom-class.js"></script>        
HTML结构

你可以通过data-custom-class属性来设置自定义的tooltip主题样式。

插件中内置了5种tooltip主题样式:.tooltip-primary.tooltip-success.tooltip-info.tooltip-warning.tooltip-danger

下面是一张Bootstrap tooltip工具提示修改主题样式的效果图:

bootstrap-tooltip-custom-class

以一个按钮为例,添加tooltip的代码如下:

<button type="button" class="btn btn-default"
    data-toggle="tooltip"
    data-placement="top"
    data-custom-class="tooltip-custom"
    title="自定义tooltip示例">Tooltip example</button>
初始化插件

你也可以通过js代码来初始化该bootstrap tooltip插件。

$(function () {
  $('.my-element').tooltip({
    customClass: 'tooltip-custom'
  });
});

Bootstrap tooltip工具提示修改主题样式插件的github地址为:https://github.com/andreivictor/bootstrap-tooltip-custom-class

在线预览 网盘下载

郑重声明:

1 本资源来源于互联网,资源的版权归资源原作者所持有,受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系,所以上传的部分资源无法先通过原作者的同意就分享给大家了,如本资源侵犯了您(原作者)的权益,请联系我们(微信号 xiaohaimei1989),我们会立马删除您的资源,并向您表达诚挚的歉意!

3 本站是一个公益型网站,分享资源的目的在于传播知识,分享知识,收取一点点打赏的辛苦费是用于网站的日常运营开支,并非用于商业用途。

4 本站资源只提供学习和参考研究使用,使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

发表评论