jquery - 在 bootstrap popover 中用 Line 替换箭头

Question

JSFIDDLE

我让这个 Bootstrap 弹出窗口正常工作，但我必须将箭头修改为水平线。这适用于弹出窗口的左侧和右侧。

这是我要修改的内容的屏幕截图:

我相信会有很多 CSS 更改，但不知道从哪里开始。

HTML:

<div class="container">
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-placement="left" data-content="Some content">Hover Left</a> | 
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Some content">Hover Right</a>
</div>

CSS:

.container {
    text-align: center;
    margin: 20% auto;
    width: 100%;
}

JS:

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

Answer 1

我已经创建了带有线条边框的左侧弹出框。希望您可以创建正确的弹出窗口。将下面的 css 代码添加到您的 .css 文件中

.container {
text-align: center;
margin: 20% auto;
width: 100%;
}
.popover.left{
 margin-left: -30px
}

.popover .arrow{
  border-width: 1px;
}
.popover.left .arrow:after {
right: -20px;
bottom: -12px;
}
.popover .arrow:after {
border-width: 0px;
content: "";
width: 30px;
height: 1px;
background-color: #ccc;
}