Bootstrap popover 實(shí)現(xiàn)鼠標(biāo)移入移除顯示隱藏功能方法
更新時(shí)間：2018年01月24日 11:40:22 作者：田小濤
下面小編就為大家分享一篇Bootstrap popover 實(shí)現(xiàn)鼠標(biāo)移入移除顯示隱藏功能方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
該段js代碼可實(shí)現(xiàn) popover 下鼠標(biāo)移入移除時(shí)顯示、隱藏 popover 提示信息功能
var strContent = '<div class="media"><div class="position-left media-left"><img class="img-circle" src="/assets/images/avatar.jpg">'+
'</div>'+
'<div class="media-body">'+
'<h4 class="media-title">小標(biāo)題</h4>'+
'<p><strong>張三</strong> <span class="label label-primary">管理員</span></p>'+
'</div>'+
'</div>';
$( 'li#user_avatar' ).popover({
trigger:'manual',
placement:'bottom',
html:true,
container:'#bs-example-navbar-collapse-1',
content:strContent,
}).on( 'mouseenter', function(){
var _this = this;
$(this).popover( 'show' );
$(this).siblings( '.popover' ).on( 'mouseleave' , function () {
$(_this).popover( 'hide' );
});
}).on( 'mouseleave', function(){
var _this = this;
setTimeout(function () {
if (!$( '.popover:hover' ).length) {
$(_this).popover( 'hide' )
}
}, 100);
});
以上這篇Bootstrap popover 實(shí)現(xiàn)鼠標(biāo)移入移除顯示隱藏功能方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)從連接中獲取youtube的key實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)從連接中獲取youtube的key的方法,涉及javascript字符串操作的相關(guān)技巧,需要的朋友可以參考下2015-07-07
本文通過實(shí)例代碼給大家介紹的使用JavaScript中的lodash編寫雙色球效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-06-06
如何使用JavaScript檢測(cè)空閑的瀏覽器選項(xiàng)卡
這篇文章主要介紹了如何使用JavaScript檢測(cè)空閑的瀏覽器選項(xiàng)卡，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
簡(jiǎn)單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換
這篇文章主要介紹了簡(jiǎn)單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2015-12-12
每個(gè)微信小程序都可以有自己的本地緩存，本篇文章主要介紹了微信小程序-詳解數(shù)據(jù)緩存，可以通過函數(shù)可以對(duì)本地緩存進(jìn)行設(shè)置、獲取和清理，有興趣的可以了解一下。2016-11-11
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)js拖拽效果，很詳細(xì)的js拖拽效果實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript運(yùn)動(dòng)框架 鏈?zhǔn)竭\(yùn)動(dòng)到完美運(yùn)動(dòng)(五)
這篇文章主要為大家詳細(xì)介紹了JavaScript運(yùn)動(dòng)框架的第五部分，鏈?zhǔn)竭\(yùn)動(dòng)到完美運(yùn)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Bootstrap表單簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap表單的簡(jiǎn)單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
詳解JS去重及字符串奇數(shù)位小寫轉(zhuǎn)大寫
本篇文章主要介紹了詳解JS去重及字符串奇數(shù)位小寫轉(zhuǎn)大寫 ，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2016-12-12
微信小程序轉(zhuǎn)換uniapp的遷移步驟以及遇到的問題總結(jié)
最近公司有個(gè)需求,第一次遇到,把原生的微信小程序代碼轉(zhuǎn)換為uni-app項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于微信小程序轉(zhuǎn)換uniapp的遷移步驟以及遇到問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07