CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Stéphane Laurent
Stéphane Laurent

Reputation: 84559

No place enough for my popup

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>

Upvotes: 0

Views: 67

Answers (3)

MassivePenguin
MassivePenguin

Reputation: 3711

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

Upvotes: 1

user133408
user133408

Reputation:

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

Upvotes: 0

n1kkou
n1kkou

Reputation: 3142

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

Upvotes: 0

Related Questions