twitter-bootstrap 引导工具提示不适用于鼠标悬停
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19533864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap tooltip not working on mouse hover
提问by SpringLearner
I am trying to do to Bootstrap tooltip on mouse hover on an input field of a form but it's not working. If you click on the input field, it shows the tooltip. However, I want it show on mouse hover and hide after 5 seconds. Here is the jsfiddle. This is the Javascript code.
我试图在鼠标悬停在表单的输入字段上时对 Bootstrap 工具提示进行操作，但它不起作用。如果单击输入字段，则会显示工具提示。但是，我希望它在鼠标悬停时显示并在 5 秒后隐藏。这是jsfiddle。这是 Javascript 代码。
$(function() {
$("#number").popover({
title: 'Enter Mobile Number',
content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890"
});
});
回答by rajesh kakawat
回答by josh
To make the popover work on hover, you have to use the trigger: 'hover'method available to the popover. You can also add a delay by adding the delayattribute. For example:
要使 popover 在悬停时工作，您必须使用trigger: 'hover'popover 可用的方法。您还可以通过添加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}
});
});
This will show your popover on hover on #numberas well as add delay. See my updated jsFiddleas well. For a full description of the properties, visit the Bootstrap docs on popover.
这将在悬停时显示您的弹出窗口#number并添加延迟。也请参阅我更新的jsFiddle。有关属性的完整说明，请访问 上的 Bootstrap 文档popover。
Note that in the jsFiddle, it obscures part of the top of the popover. If the input is moved further down the page, the popover will display correctly.
请注意，在 jsFiddle 中，它掩盖了弹出窗口顶部的一部分。如果输入进一步向下移动页面，弹出窗口将正确显示。
回答by Rohan Kumar
回答by Mahfuzur Rahman
Just select your element, then call popover with hover
只需选择您的元素，然后通过悬停调用 popover
<a data-toggle="popover" data-placement="right" data-content="Your Content">Mouse Over Here</a>
$("[data-toggle=popover]").popover({trigger:"hover"});
