使用 jQuery 更改 Bootstrap 弹出框箭头颜色答案

【问题标题】：Change Bootstrap popover arrow color with jQuery使用 jQuery 更改 Bootstrap 弹出框箭头颜色
【发布时间】：2023-03-14 15:57:01
【问题描述】：

我正在尝试使用 jQuery 更改 Bootstrap 弹出框的箭头颜色（因为常规 css 不起作用）。这是我的html代码：

<tr>
    <td>
        <span class="stat__title">1 Yr Target:</span>
        <small class="pop" data-toggle="popover" data-placement="right" data-content="POPOVER CONTENT">
            (?)
        </small>
        <br>
        <span class="stat__text">PLACEHOLDER</span>
    </td>
    <td>
        <span class="stat__title">EPS (ttm):</span>
        <br>
        <span class="stat__text">{{ riskStats?.quote?.eps }}</span>
    </td>
</tr>

这是我的 TypeScript 代码（使用 Angular2）：

export class DetailComponent implements AfterViewChecked {
    constructor(...) {
        this.activateToolTips();
    }

    ngAfterViewChecked() {
        this.formatToolTips();
    }

    activateToolTips() {
        jQuery('.pop').popover({ html : true, trigger: 'hover', container: 'body' });
    }

    formatToolTips() {
        jQuery('.popover').css({'color': '#506a85', 'font-weight': 'bold', 'background-color': 'red'});
        jQuery('.popover.right .arrow:after').css({'border-right-color': 'red'});
    }
}

我的弹出框的主体变为红色，但箭头没有改变。非常感谢您对这项工作的任何帮助。

【问题讨论】：

标签： jquery twitter-bootstrap tooltip popover

【解决方案1】：

您不能操作 :after，因为它在技术上不是 DOM 的一部分，因此任何 JavaScript 都无法访问。但是你可以添加一个新的类，指定一个新的 :after。

例如：

formatToolTips() {
  jQuery('.popover').css({'color': '#506a85', 'font-weight': 'bold', 'background-color': 'red'}).addClass('popover-my-arrow');
}

.popover-my-arrow > .arrow:after {
  border-right-color: red !important;
}

【讨论】：

感谢您的输入，不幸的是这不起作用

【解决方案2】：

我已经包含了一个使用 CSS 的示例

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.popover.right .arrow:after {
  border-right-color: red;
}
</style>
</head>
<body>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>


</body>
</html>

【讨论】：

感谢您的建议，但我没有任何运气
感谢演示人员，不幸的是它仍然无法正常工作，我认为这可能是 Angular 2 的事情..