संरेखित पॉपओवर छोड़ दिया

Question

मैं कैसे कर सकता है पॉपओवर नीचे div छवि में तरह पॉपओवर बटन दाईं ओर से परे जाना नहीं है,:

यहाँ मेरी कोड है।

HTML:

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

जावास्क्रिप्ट:

$('[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

आप कुछ इस तरह कोशिश करते हैं और अपनी आवश्यकताओं के अनुकूल हो सकते हैं:

1.) सीएसएस के माध्यम से तीर की स्थिति निर्धारित करें:

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

2.) क्लिक करने के बाद पॉपओवर की स्थिति सेट करें घटना। अपने कोड उदाहरण के साथ यह ऐसा दिखाई दे सकता:

$('[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'); 
       }); 

Working Example

Answer 2

बूटस्ट्रैप v4 के साथ

, आप 'ऑफसेट' संपत्ति टिथर द्वारा प्रदान का उपयोग कर सकते हैं:

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

यह पॉपओवर ऑफसेट होगा सामग्री, लेकिन आपको अभी भी तीर