改变bootstrap tooltip的样式

通常要改变框架原有的样式,常规的做法是找到设置该样式的选择器进行重写,有时为了不影响其他页面的显示或者涉及到选择器优先级的时候,

会在原选择器前加一级,使得影响范围更准确。

现在说的是改变bootstrap tooltip的样式:

1、改变气泡颜色以及小三角的颜色:

.tooltip-inner{

    background-color: #0e8ee7;

}

.tooltip.top .tooltip-arrow{

    border-top-color: #0e8ee7;

}

效果:


2、使用api的html来改变

title里面可以写html代码


然后,

$(function () {

        $(function () { $(".tooltip-options a").tooltip({html : true });   //html默认为false

}

使用html要注意,可能会造成 XSS 攻击,所以要慎用。

效果:


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 这篇文字里我会介绍50 个便于使用的 CSS2/CSS3 代码片段给所有的WEB专业人员. 选择IDE开发环境来存...
    JamHsiao_aaa4阅读 5,245评论 0 3
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 6,568评论 1 10
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 12,202评论 2 19
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 10,127评论 0 0
  • 特别喜欢自己的一个名字——心念 取这个名字是因为以前注册一个游戏,那是自己玩的第一个手游,也是唯一一个玩的长久的游...
    心舞飞扬阅读 4,705评论 0 1

友情链接更多精彩内容