手机版 | ------------全站资源有,统一解压码,解码平台,请点这里 ------------ 设首页 | 加收藏
当前位置: 网站首页 > jQuery库 > 文章 当前位置: jQ > 文章

Bootstrap tooltip工具提示修改主题样式插件

时间:2020-06-30    点击: 次    来源:网络    作者:佚名 - 小 + 大

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工具提示修改主题样式的效果示例图

以一个按钮为例,添加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

 Bootstrap tooltip工具提示修改主题样式插件 本地下载

上一篇:响应式圆形js轮播图插件

下一篇:jQuery固定背景视觉滚动特效插件

浙ICP备18035339号-15  |   QQ:79720816  |  地址:蚂蚁分享-一个只做有用的分享。  |  13388629007  |  
Copyright © 2023 蚂蚁分享网 版权所有,授权www.tanan.net使用 Powered by ANTQQ.COM