モーダルおよび入力グループアドオンでのブートストラップポップオーバー

Question

ブートストラップ3.3.5ポップオーバーが動作しません。私は、入力グループアドオンをホバーするとポップオーバーが見えるようにしたいが、何も起こらない。

私の現在のコード：

Javascriptを：

$(document).ready(function() { 
     $("[data-toggle=popover]").popover({ trigger: 'hover', container: '#imgPopover'}); 
    }); 

HTML

<div class="input-group"> 
    <button id="imgPopover" type="button" class="input-group-addon" data-toggle="popover" data-placement="bottom" data-content="Content" data-trigger="hover"> 
     <img src="~/images/absolent-logo.gif" style="max-height: 20px" /> 
     <span data-bind="html: $parents[1].text.qTempHeader"></span> 
    </button> 
    <input type="number" class="form-control" data-bind="value: qTemp"/> 
</div> 

私は別のものの束を試してみたが、何もそれを行うにはいないようです。正しい方向へのプッシュは非常に高く評価されるだろう。

Answer 1

この問題はcontainer: '#imgPopover'属性にあり、divは小さすぎてポップオーバーを含むことができません。 bodyとその動作に変更してください。

$(document).ready(function() { 
 
     $("[data-toggle=popover]").popover({ trigger: 'hover', container: 'body'}); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<div class="input-group"> 
 
    <button id="imgPopover" type="button" class="input-group-addon" data-toggle="popover" data-placement="bottom" data-content="Content" data-trigger="hover"> 
 
     test me 
 
    </button> 
 
    
 
</div>