时间戳

首页 > 解决方案 > 我可以动态更改引导弹出窗口标题样式吗

jquery - 我可以动态更改引导弹出窗口标题样式吗

问题描述

这似乎是多次被问到的问题，但我无法让它在我的情况下工作。

我有一个表，其中包含带有背景颜色集的 td 元素。

当我设置弹出框（具有标题和内容图像）时，我想将标题设置为与 td 元素具有相同的背景颜色。

我正在使用 jquery 和 bootstratp 3.3.7 并且到目前为止有以下代码（工作正常）

...

$('td').hover(function(){
                // mousein
                $(this).popover({
                        animation: true,
                        container: 'body',
                        content : $(this).attr("popover-content"),
                        title : $(this).attr("popover-title"),
                        placement : "right",
                        html : "true",
                        trigger : "manual",
                });
                $(".popover-title").css('background-color',$(this).css('background-colo
r')+' !important');
                $(this).popover('show');
        },function(){
                // mouseout
                $(this).popover('hide');
        });

...

不起作用的一点是对类 popover-title 上的 css 的更改。

我一定错过了一些重要的事情，所以会很感激一些帮助吗？

谢谢，保罗

标签： jquerycsstwitter-bootstrappopover

解决方案

对于任何因这个特定问题而绊倒的人，这就是我解决它的方法。

1）通过添加一个链接到popover show事件的函数（在SO的相关文章中找到！）例如

<!-- bootstrap tooltip plugin -->
$('td').hover(function(){
        // mousein
        $(this).popover({
                animation: true,
                container: 'body',
                content : $(this).attr("popover-content"),
                title : $(this).attr("popover-title"),
                placement : "right",
                html : "true",
                trigger : "manual",
        }).on("show.bs.popover", function(){
                if ($(this).attr("popover-content")) {
                        $(this).data("bs.popover").tip().css('background-color',$(this).css('background-color'));
                } else {
                        $(this).data("bs.popover").tip().css('background-color','#107a9d');
                }
        });
        $(this).popover('show');
},function(){
        // mouseout
        $(this).popover('hide');
});
  1. 通过使背景颜色“继承”什么是（大概）tip() css。

推荐阅读