hizalayın popover

Question

nasıl popover alt div görüntüdeki gibi popover düğmesi sağ tarafta ötesine gitmez yapabilir bıraktı.

HTML:

<a href="#" tabindex="0" class="btn btn" role="button" data-toggle="popover" data-trigger="focus" data-content="<input>"> 
    Search 
</a> 

JavaScript:

$('[data-toggle="popover"]').popover({ 
        trigger: 'manual', 
        placement: 'bottom', 
        html: true 
        }).click(function (e) { 
        e.preventDefault(); 
        $(this).popover('show'); 
        }); 

Bootply:
http://www.bootply.com/3SLzUgPyrV

Answer 1

Böyle bir şey denemek ve gereklerine uyarlamak olabilir:

1.) CSS ile okun konumunu ayarlayın:

.popover.bottom .arrow { 
    left:90% !important; 
} 

2.) tıklamadan sonra popover konumunu ayarla Etkinlik. senin kod örneği sayesinde bu gibi görünebilir:

$('[data-toggle="popover"]').popover({ 
       trigger: 'manual', 
       placement: 'bottom', 
       html: true 
       }).click(function (e) { 
       e.preventDefault(); 
       // Exibe o popover. 
       $(this).popover('show'); 

       $('.popover').css('left', '63px'); 
       }); 

Bootstrap v4 ile

Working Example

Answer 2

, sen 'offset' özelliği Tether tarafından sağlanan kullanabilirsiniz:

// Enable all popovers and tooltips 
$('[data-toggle="popover"]').popover({ 
    html: true, 
    offset: '0 100px' //offset the popover content 
}); 

Bu popover telafi edecek içerik, ancak yine de,