Bootstrap-Popover im Modal und Input-Group-Addon

Question

Ich kann Bootstrap 3.3.5 Popover nicht zum Laufen bringen. Ich möchte, dass das Popover sichtbar wird, wenn ich das Input-Group-Addon schwebe, aber nichts passiert.

Mein aktueller Code:

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> 

Ich habe ein paar verschiedene Dinge ausprobiert, aber nichts scheint es zu tun. Ein Schub in die richtige Richtung wäre sehr zu begrüßen.

Answer 1

Das Problem ist mit dem container: '#imgPopover' Attribut, das Div ist zu klein, um das Popover zu enthalten. ändern Sie es zu body und seine Arbeit. .

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