Bootstrap Popover：右上角对齐

Question

有谁知道如何在右上角对齐Bootstrap Popover？

jsfiddle

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

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

这就是我要做的事情：

而不是：

我已经尝试了很多建议，但不幸的是它们中的任何一个都在工作。

Answer 1

还有另一个原因。 Bootstrap有 bug ！更新您的Bootstrap CSS以使其工作。在这里查看Fiddle。

将data-container="body"更改为您的父级。您必须显示您的代码才能获得帮助！在您的代码中，使用：

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

documentation说：

  

将popover追加到特定元素。示例：container：'body'。此选项特别有用，因为它允许您将弹出窗口放置在触发元素附近的文档流中 - 这将防止弹出窗口在窗口大小调整期间从触发元素浮动。

<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

我已经按照传统方式管理：

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");
});