Question

使用Bootstrap弹出框，弹出框不会出现在悬停状态。只有在我点击链接时才会出现。我感谢任何帮助。 TIA

    <script type="text/javascript">
    $(function () {
        $('body').popover({
            html: true,
            content: function () {
                return $(this).next().html();
            },
            selector: '.has-popover'
        })
    });
</script>

<body>
<form id="form1" runat="server">
    <div id="div1" style="margin: 80px 0 0 20px;" runat="server">
        <a id="A1" style="text-decoration-style: dashed; text-decoration: dashed;" class="has-popover" href="#" rel="popover" data-placement="right" data-original-title="Title Goes Here!" data-trigger="hover">Hover for popover</a>
        <div id="Div3" style="display: none">
            <div style="float: left; width: 15%;">
                <img style="max-height: 75px; max-width: 75px;" src="style/x.png" />
            </div>
            <div style="float: left; width: 85%;">
                <ul>
                    <li>blah blah blah</li>
                    <li>yada yada yada</li>
                    <li>blah blah blah</li>
                </ul>
            </div>
        </div>
    </div>
</form>

Answer 1

默认情况下，弹出窗口由click触发，而不是hover。

您可以通过添加选项来更改它：

trigger: 'hover'

所以你的脚本应该是这样的：

<script type="text/javascript">
    $(function () {
        $('body').popover({
            html: true,
            content: function () {
                return $(this).next().html();
            },
            selector: '.has-popover',
            trigger: 'hover' // Add this option
        })
    });
</script>

Answer 2

传递trigger作为弹出窗口的选项：

$('body').popover({
            html: true,
            content: function () {
                return $(this).next().html();
            },
            selector: '.has-popover',
            trigger: 'hover'
})

Answer 3

下面是工作jsfiddle检查出来

http://jsfiddle.net/2DAZ2/43/

还使用“selector”

检查popover的问题

因此您需要在启动时传递其他参数

https://github.com/twbs/bootstrap/issues/4990

$('body').popover({
            html: true,
            content: function () {
                return $(this).next().html();
            },
            selector: '.has-popover',
            trigger: 'hover'
})

悬停时不会显示Popover

3 个答案: