引導工具提示不適用於鼠標懸停

我正試圖對引導工具提示鼠標懸停在表單的輸入字段上，但它不工作。如果你點擊輸入欄，它會顯示工具提示。但是，我希望它在鼠標懸停時顯示並在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

引導工具提示不適用於鼠標懸停

回答

相關問題