当前位置:JS特效 » 其他 » Bootstrap tooltip工具提示修改主题样式插件
 Bootstrap tooltip工具提示修改主题样式插件
如果您觉得内容不错,请分享:

插件介绍

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

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:38
简要教程

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

使用方法

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




         
                
HTML结构

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

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

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

Bootstrap tooltip工具提示修改主题样式的效果示例图

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


                
初始化插件

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

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

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

Top