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

Posted 2023-05-08

【中文标题】我可以动态更改引导弹出窗口标题样式吗

【英文标题】：Can I change the bootstrap popover title style dynamically

【发布时间】：2020-03-07 12:17:49

【问题描述】：

这似乎是多次询问的问题，但我无法在我的情况下使用它。

我有一个表格，其中包含带有背景颜色集的 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 的更改。

我一定遗漏了一些重要的东西，希望能得到一些帮助吗？

谢谢，保罗

【参考方案1】：

根据jQuery docs：

注意： .css() 忽略 !important 声明。因此，$( "p" ).css( "color", "red !important" ) 语句不会将页面中所有段落的颜色变为红色。强烈建议改用类；否则使用 jQuery 插件。

因此，您可以做的是应用许多类之一，这些类在您的 CSS 中使用!important 单独设置样式。但是，您可能根本不需要!important。您所需要的只是覆盖已应用样式的特殊性。

【讨论】：

好的，明白了。如果我按照建议删除它仍然没有变化。我没有意识到 jquery 忽略了它，但它是基于对类似问题的广泛研究的众多尝试之一。

如果没有 runnable minimal reproducible example 我无法帮助您，因为我不知道我必须覆盖什么，并且我无法测试任何潜在的解决方案。在问题 sn-p 或您选择的 sn-p 网站上重现您的问题，我会看看。

【参考方案2】：

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

1) 通过添加链接到弹出显示事件的函数（可在 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');
);

通过使背景颜色“继承”（大概）是tip() css。