0

我正在尝试将鼠标悬停在表单的输入字段上时引导工具提示，但它不起作用。如果单击输入字段，则会显示工具提示。但是，我希望它在鼠标悬停时显示并在 5 秒后隐藏。这是jsfiddle。这是 Javascript 代码。

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

4 回答 4

4

您需要提供属性data-trigger：

data-trigger="hover"

尝试这样的事情：小提琴

<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+917676462182" rel="popover" data-trigger="hover"/>
于 2013-10-23T06:17:07.537 回答
3

要使弹出框在悬停时工作，您必须使用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。有关属性的完整描述，请访问上的 Bootstrap 文档popover。

请注意，在 jsFiddle 中，它隐藏了弹出框顶部的一部分。如果输入进一步向下移动页面，弹出框将正确显示。

于 2013-10-23T06:08:41.610 回答
1

尝试使用trigger:'hover' 之类的，

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

阅读弹出框

演示

于 2013-10-23T06:02:28.560 回答
1

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

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

$("[data-toggle=popover]").popover({trigger:"hover"});
于 2017-12-11T06:40:12.763 回答