Bootstrap Popover размещения 'вправо и влево' проблема при срабатывании вручную

Question

Bootstrap Popover размещения 'вправо и влево' проблема при срабатывании вручную

-2

Когда есть много popovers, и если я хочу вызвать тех, кто использует "руководство", тогда только верхний и нижний будут отображаться в правильном положении. Если размещение правильное или левое, оно смещено. Пожалуйста, взгляните на эту скрипку..

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>

amith kumar n r 14 апр. 2016, в 14:10

Источник

1

Да, босс, просто дай нам секунду :)
Morpheus 14 апр. 2016, в 12:33
0

Добро пожаловать в ТАК. В следующий раз улучшите существующий вопрос вместо того, чтобы просто публиковать другой. Пока вы ждете «кто-нибудь опубликует решение как можно скорее», вы должны прочитать это: stackoverflow.com/help/how-to-ask
Zim 14 апр. 2016, в 12:39
1

Он важный человек, мы должны дать ему ответ, даже если он не вежливый ...
Pimento Web 14 апр. 2016, в 13:27

Показать ещё 1 комментарий

Теги:

twitter-bootstrap

css

popover

1 ответ

Ещё вопросы

Да, босс, просто дай нам секунду :)
Добро пожаловать в ТАК. В следующий раз улучшите существующий вопрос вместо того, чтобы просто публиковать другой. Пока вы ждете «кто-нибудь опубликует решение как можно скорее», вы должны прочитать это: stackoverflow.com/help/how-to-ask
Он важный человек, мы должны дать ему ответ, даже если он не вежливый ...

Zim · Accepted Answer · 2016-04-14T12-54-00.000Z

Вы можете решить эту проблему, используя опцию viewport.

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

http://codeply.com/go/Amjs267PcE

Спасибо большое, отлично работает :)