我的弹出窗口没有足够的地方

Question

我有一个弹出窗口，除了指针没有指向正确的位置之外：

这似乎是由于缺乏地方。你知道解决方法吗？指针是否一定在弹出窗口的中间？我不想更改弹出窗口的位置 (data-placement="bottom")。

>>JSFIDDLE<<:

<table style="width:300px">
  <tr>
    <td><a href="#" data-toggle="popover" data-content="Jill is a kiwi<img src='http://s.cdpn.io/3/kiwi.svg'>" data-html="true" data-animation="true" data-placement="bottom" data-trigger="hover" title="Who is Jill?">Jill</a></td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Answer 1

您需要覆盖引导 CSS；以下似乎适用于您的小提琴。

td { position: relative; }
.popover.bottom { top: 1.5em!important; width: 300px; } // change this to the width of the parent table, otherwise your popup will be the width of the td it's tied to
.popover.bottom .arrow{ left: 10%; } // dictates how far from the left the arrow appears; alter this value as you see fit

Example Fiddle

Answer 2

您可以在您的 css 文件中添加：.popover.bottom>.arrow{ left:30px;} 以覆盖箭头的默认中间对齐方式

Answer 3

您也可以使用data-placement="right"将弹出框放在链接的右侧。