2016-04-14 8 views
-3

Wenn viele Popovers sind, und wenn ich diejenigen mit 'manuell' auslösen möchte, dann nur oben & Boden wird in der richtigen Position angezeigt. Wenn die Platzierung rechts oder links ist, ist sie falsch ausgerichtet. Bitte werfen Sie einen Blick auf diese Geige ..Bootstrap Popover Platzierung 'rechts & links' Problem, wenn manuell ausgelöst

https://jsfiddle.net/6nz4u940/

<html> 
<head> 
    <title>Try v1.2 Bootstrap Online</title> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
<script type="text/javascript"> 
    function popit(){ 
     console.log("fddffdg"); 
     $("[data-content]").each(function() { 
     $(this).attr({"data-container":"body","data-trigger":"manual","data-toggle":"popover"}); 
     $(this).popover('toggle'); 
     }); 
    } 
</script> 
</head> 
<body> 
<button onclick="popit()">click me and scroll down, i wont show all popover</button> 
<div class = "container" style = "padding: 100px 50px 10px;" > 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br><button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-default" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement="right" 
     data-content = "Some content in Popover on left"> 

     Popover on left 
    </button> 
    <br><br><br><br><br><br><br><br> 
    <button type = "button" class = "btn btn-primary" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement = "top" 
     data-content = "Some content in Popover on top"> 

     Popover on top 
    </button> 

    <button type = "button" class = "btn btn-success" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement = "bottom" 
     data-content = "Some content in Popover on bottom"> 

     Popover on bottom 
    </button> 

    <button type = "button" class = "btn btn-warning" title = "Popover title" 
     data-container = "body" data-toggle = "popover" data-placement = "right" 
     data-content = "Some content in Popover on right"> 

     Popover on right 
    </button> 

</div> 

<script> 
    $(function(){ 
     $("[data-toggle = 'popover']").popover(); 
    }); 
</script> 

</body> 
</html> 
+1

Ja Chef, geben Sie uns ein zweite :) – Morpheus

+0

Willkommen bei SO. Nächstes Mal, [verbessern Sie die vorhandene Frage] (http://stackoverflow.com/questions/36621552/bootstrap-popover-placement-right-left-issue), anstatt gerade ein anderes zu senden. Während Sie darauf warten, dass "jemand so schnell wie möglich eine Lösung posten", sollten Sie Folgendes lesen: http://stackoverflow.com/help/how-to-ask – ZimSystem

+1

Er ist ein wichtiger Mann, wir müssen ihm eine Antwort geben, auch wenn er nicht höflich ist ... – pbenard

Antwort

1

Sie dies mit der Option viewport lösen können ..

$("[data-content]").popover({ 
    trigger:"manual", 
    viewport:".container" 
}); 

http://codeply.com/go/Amjs267PcE

+0

Vielen Dank, es funktioniert super :) –