引导工具提示在鼠标悬停时不起作用

Question

我正在尝试将鼠标悬停在表单的输入字段上时引导工具提示，但它不起作用。如果单击输入字段，则会显示工具提示。但是，我希望它在鼠标悬停时显示并在 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' 方法。您还可以通过添加 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。有关属性的完整描述，请访问the Bootstrap docs on popover。

请注意，在 jsFiddle 中，它会遮挡弹出框顶部的一部分。如果将输入内容移到页面下方，则弹出框将正确显示。

Answer 3

尝试使用 trigger:'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

只需选择您的元素，然后通过悬停调用弹出框

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

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