模式和输入组插件中的Bootstrap popover

Bootstrap popover in modal and input-group-addon

本文关键字：Bootstrap popover 插件 输入 模式      更新时间：2023-12-21

我无法让Bootstrap 3.3.5 popover正常工作。我希望popover在悬停输入组插件时变得可见，但什么也没发生。

我当前的代码：

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>

我尝试了很多不同的方法，但似乎都无济于事。如果能朝着正确的方向努力，我将不胜感激。

问题出在container: '#imgPopover'属性上，div太小，无法包含popover。将其更改为CCD_ 2及其工作。

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

相关文章：