Bootstrap Popover: Align on top right

Question

Does anyone know how to align Bootstrap Popover on top right?

jsfiddle

$('.well').each(function() {
    var $this = $(this);

    $this.popover({
      placement: 'right',
      html: true,
      content: $this.find('.tip').html()
    })
});

This is what I am trying to do:

Instead of this:

I've tried a lot of suggestions but any of them are working unfortunately.

Answer 1

There's another reason too. Bootstrap has a bug ! Update your Bootstrap CSS to make it work. Check out the Fiddle here.

---

Change the data-container="body" to your parent. You have to show your code to get help! In your code, use:

data-container="parent-selector" // Instead of the default!

The documentation says:

Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.

<button type="button" class="btn btn-default" data-container="#idofparent"
        data-toggle="popover" data-placement="top"
        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

Answer 2

I've managed doing it on the traditional way:

jsfiddle

$('div.tip').hide();          

$('.display-tooltip').on('blur', function() {
    $(this).parent().siblings('div.tip').fadeOut('medium');
});

$('.display-tooltip').on('focus', function() {
    $(this).parent().siblings('div.tip').fadeIn( "slow");
});