在引导程序弹出窗口中用Line替换箭头

Question

JSFIDDLE

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

以下是我要修改的内容的屏幕截图：

我相信会有很多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

我创建了带有边框的左侧弹出式窗口。希望你能创造出正确的弹出窗口。将bellow 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;
}