Fatal编程技术网
  • jquery/
  • Jquery 悬停时不显示Popover

Jquery 悬停时不显示Popover

jquery twitter-bootstrap

Jquery 悬停时不显示Popover,jquery,twitter-bootstrap,Jquery,Twitter Bootstrap,使用引导popover，popover不会显示在悬停状态。它仅在单击链接时显示。谢谢你的帮助。短暂性脑缺血发作 <script type="text/javascript"> $(function () { $('body').popover({ html: true, content: function () { return $(this).next().html();

使用引导popover，popover不会显示在悬停状态。它仅在单击链接时显示。谢谢你的帮助。短暂性脑缺血发作

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


$（函数（）{
$（'body'）.popover({
是的，
内容：功能（）{
返回$（this.next（）.html（）；
},
选择器：'.has popover'
})
});

    

  • 废话废话
    • 

  • 雅达雅达雅达
    • 

  • 废话废话
    •

默认情况下，popover由
单击触发，而不是
悬停触发

您可以通过添加选项进行更改：


触发器：“悬停”

因此，您的脚本应该如下所示：


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




$（函数（）{
$（'body'）.popover({
是的，
内容：功能（）{
返回$（this.next（）.html（）；
},
选择器：'.has popover'，
触发器：“悬停”//添加此选项
})
});

Pass
trigger
作为popover的一个选项：


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



下面是正在工作的JSFIDLE，请检查它



还可以用“选择器”检查popover的问题

因此，您需要在启动时传递额外的参数




有趣。这似乎解决了悬停问题，但是，现在html没有显示在弹出窗口中；我只得到标题。@请在popover元素上使用
data content=“example text”
属性。我在这里测试了它，它正确地显示：

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