0

I have a popup which works except that the pointer does not point at the good location: enter image description here

It seems to be due to a lack of place. Do you know a workaround ? Is the pointer necessarily at the middle of the popup side ? I don't want to change the placement of the popup (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>
Stéphane Laurent
  • 75,186
  • 15
  • 119
  • 225

3 Answers3

1

You'll need to override the bootstrap CSS; the following seems to work in the context of your Fiddle.

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

MassivePenguin
  • 3,701
  • 4
  • 24
  • 46
0

You can add in your css file: .popover.bottom>.arrow{ left:30px;} to overwrite the default middle alignment of the arrow

n1kkou
  • 3,096
  • 2
  • 21
  • 32
0

You can also place popover on right side of the link with data-placement="right".