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

要使popover工作在悬停状态，您必须使用弹出窗口可用的trigger: 'hover'方法。您还可以通过添加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上悬停时显示您的popover并添加延迟。另请参阅我更新的jsFiddle。有关这些属性的完整说明，请访问the Bootstrap docs on popover。

请注意，在jsFiddle中，它会模糊弹出窗口顶部的一部分。如果输入在页面下方进一步移动，则弹出窗口将正确显示。

Answer 3

尝试使用触发器：'hover'赞，

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

阅读popover

Demo

Answer 4

只需选择您的元素，然后使用悬停

调用popover

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

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

bootstrap工具提示无法在鼠标悬停上工作

4 个答案: