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

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

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

来源

2013-10-23 SpringLearner

你的jsfiddle是空为我... – josh

@RohanKumar请现在看到http：// jsfiddle .net/UyJAZ/1/ – SpringLearner

@JoshuaSmock请看这个http://jsfiddle.net/UyJAZ/1/ – SpringLearner

您需要提供属性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"/>

来源

2013-10-23 06:17:07

好，你能告诉我什么是数据触发器= “悬停” – SpringLearner

@javaBeginner将弹出窗口的触发器选项设置为悬停。可以使用标记中的data- *属性完成： –

再次感谢，+ 1对此。是否可以在一段时间后隐藏工具提示说5秒 – SpringLearner

尝试使用触发： '悬停'一样，

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

读popover

Demo

来源

2013-10-23 06:02:28

你给jsffidle的按钮和它的工作点击，但我希望它的输入领域和悬停。请http://jsfiddle.net/UyJAZ/1/。这里还有它的鼠标点击工作 – SpringLearner

@javaBeginner再次看到我的演示或http://jsfiddle.net/rohankumar1524/LWwr9/ –

谢谢现在它的工作，+ 1。请告诉我你使用触发器：'悬停'和rajesh使用数据触发='悬停'和这个网站是**不使用**都http://www.w3resource.com /twitter-bootstrap/popover-tutorial.php – SpringLearner

要悬停的酥料饼的工作，你必须使用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} 
    }); 
});

这将显示您的弹出窗口悬停在#number上以及添加延迟。请参阅我的更新jsFiddle。有关酒店的完整说明，请访问the Bootstrap docs on popover。

请注意，在jsFiddle中，它遮挡了popover顶部的一部分。如果输入进一步向下移动，则弹出窗口将正确显示。

来源

2013-10-23 06:08:41 josh

感谢它的工作，以及我正在浏览这个http://www.w3resource.com/twitter-bootstrap/popover-tutorial.php所以这里他们没有包含触发器：'悬停'但直到其工作 – SpringLearner

他们可能会做什么@ra jesh kakawat在下面描述，它将'data-trigger =“hover”'添加到DOM元素。这也会使悬停时的弹出式触发器成为可能。引导程序通过触发popover'hover'来读取'data-trigger ='hover''与读取JavaScript代码中的'trigger：'hover''相同的方式。 – josh

我给了+1，因为你的回答是有用的。是否有使用data-trigger ='hover'over trigger的任何优势：'hover' – SpringLearner

只需选择你的元素，然后调用酥料饼与悬停

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

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

来源

2017-12-11 06:40:12

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

回答

相关问题