Question

我正在尝试使用jQuery更改我的Bootstrap popovers的箭头颜色（因为常规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'});
    }
}

我的弹壳的身体变红但箭头没有变化。非常感谢任何帮助我做这项工作。

Answer 1

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

例如：

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

Answer 2

我使用CSS

包含了一个示例

＆＃13;

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

＆＃13;

<!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>

＆＃13;

使用jQuery更改Bootstrap popover箭头颜色

2 个答案: