引导工具提示不适用于鼠标悬停

Question

我正在尝试在窗体的输入字段上将鼠标悬停在Bootstrap工具提示上，但无法正常工作。 如果单击输入字段，则会显示工具提示。 但是，我希望它在鼠标悬停时显示并在5秒后隐藏。 这是jsfiddle 。 这是Javascript代码。

$(function() {
    $("#number").popover({
        title: 'Enter Mobile Number', 
        content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890"
    });  
});

Answer 1

您需要提供属性data-trigger ：

data-trigger="hover"

尝试这样的事情： FIDDLE

<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+917676462182" rel="popover" data-trigger="hover"/>

Answer 2

要使悬停窗口上的弹出窗口有效，您必须使用trigger: 'hover'窗口可用的trigger: 'hover'方法。 您还可以通过添加delay属性来添加delay 。 例如：

$(function () { 
    $("#number").popover({
        title: 'Enter Mobile Number', 
        content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890",
        trigger: 'hover',
        delay: {show: 0, hide: 3000}
    });  
});

这将显示你的上悬停酥料饼#number以及增加延迟。 也请参阅我更新的jsFiddle 。 有关属性的完整说明，请访问popover上的Bootstrap文档 。

请注意，在jsFiddle中，它遮盖了Popover顶部的一部分。 如果将输入进一步移至页面下，则弹出窗口将正确显示。

Answer 3

尝试使用触发器：“悬停”之类的方法，

$(function () {
    $("#number").popover({
        title: 'Enter Mobile Number',
        content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890",
        trigger:'hover'
    });
});

阅读弹出框

演示版

Answer 4

只需选择您的元素，然后将鼠标悬停调用popover

<a data-toggle="popover" data-placement="right" data-content="Your Content">Mouse Over Here</a>

$("[data-toggle=popover]").popover({trigger:"hover"});