- Adjust bootstrap's popover arrow position to always be pointing as close as possible to the target (for example, a div or p element) - demo http://cl.ly/image/3Z02121G3G0P

arrow.js

var $foo = this.$('#foo').popover( o );

// 調整 popover 的 arrow 位置指向 label 中央
$foo.on('shown', function( evt ){
    
    // 取得文字 label 的中間位置    
    var rect = $foo[0].getBoundingClientRect();
    var targetPos = rect.left + rect.width/2;

    // 找到 arrow 元件
    var $arrow = $foo.data('popover').$tip.find('.arrow');

    // 取得 popover 面板本身寬度
    var popoverWidth = $arrow.parent().get(0).getBoundingClientRect().width;

    // 移動 arrow 位置到 label 中央
    $arrow.css('left', Math.min( targetPos, popoverWidth*0.9 ) );

})