Bootstrap3 修改tooltip默认的颜色

最新推荐文章于 2023-10-07 23:25:32 发布

多云几多

最新推荐文章于 2023-10-07 23:25:32 发布

阅读量2.4k

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/leisurelyc/article/details/93004343

版权

Bootstrap 专栏收录该内容

7 篇文章

订阅专栏

.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);
    }
};