Bootstrap3 修改tooltip默认的颜色

最新推荐文章于 2025-06-30 21:40:48 发布

多云几多

最新推荐文章于 2025-06-30 21:40:48 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap

本文链接：https://blog.youkuaiyun.com/Leisurelyc/article/details/93004343

Bootstrap 专栏收录该内容

7 篇文章

订阅专栏

博客主要围绕Bootstrap3展开，重点讲述了如何修改tooltip的默认颜色，属于前端开发中对样式调整的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.tooltip-inner {
    background-color: #f7df4b;
    color: black;
}
.tooltip.top .tooltip-arrow {
    border-top-color: #f7df4b;
}
.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #f7df4b;
}
.tooltip.left .tooltip-arrow {
    border-left-color: #f7df4b;
}
.tooltip.right .tooltip-arrow {
    border-right-color: #f7df4b;
}

/**
 * 自定义tips
 */
var mTips = {

    tip:function (options) {
        if(!objNotNull(options.color)){
            options.color = '#f7df4b'
        }
         var css =
             '<style>'
                +'.tooltip-inner {background-color:'+options.color+';color: black;}'
                +'.tooltip.top .tooltip-arrow {border-top-color:'+options.color+'}'
                +'.tooltip.bottom .tooltip-arrow {border-bottom-color:'+options.color+'}'
                +'.tooltip.left .tooltip-arrow {border-left-color:'+options.color+'}'
                +'.tooltip.right .tooltip-arrow {border-right-color:'+options.color+'}'
            +'</style>';

        $(' head').append(css);
        var tipImg = '<img alt="" style="width: '+options.width+'%" data-trigger="click" data-toggle="tooltip" data-placement="auto" title="'+options.text+'" src="'+basePath+'/resources/images/homePage/tip.png">';
        $(options.selector).html(tipImg);
    }
};