0

I am using the Bootstrap 3.3.5 popover feature to display a popover when user clicks on the text inside a td element. It works fine except for one thing.

When the window width gets smaller and I reach my first responsive breakpoint, the arrow is detached from the popover (see image). You can see the arrow on the left. When the device width is wider, there is no problem. Any ideas how this could be fixed?

enter image description here

HTML: ...

<td><a id="date-today" tabindex="0" role="button" data-trigger="focus">Today<span class="caret"></span></a></td>

...

<div id="date-today-content" class="hide">
    <div>
      Popover
      Content
    </div>
</div>

JAVASCRIPT:

//Enables popover
$("#date-today").popover({
    html : true, 
    content: function() {
      return $("#date-today-content").html();
    },
    title: function() {
      return 'Today';
    },
    placement: function() {
        return 'bottom';
    },
    container: 'body'
});

Thanks for any help!

alextouzel
  • 218
  • 1
  • 18
  • There must be something else in what you're not showing because the popover triangle shows fine by me even on tiny screens. – Rachel S Jul 07 '16 at 19:06
  • Hi @Rachel S, thanks for your reply. Can I ask what version of Bootstrap you used to test it? – alextouzel Jul 09 '16 at 00:31
  • I found the problem. There was a @media somewhere in my css saying to .arrow to move left... I don't know how it ended up there :/ Anyway, problem solved. – alextouzel Jul 09 '16 at 01:26

0 Answers0