2014-01-28 22 views
1

我想阻止工具提示隱藏時,我點擊它。除了我點擊身體的地方,它應該隱藏它。防止引導工具提示隱藏點擊它

即使在Tab鍵上,工具提示也應該可以工作。

爵士小提琴:

http://jsfiddle.net/C5GBU/41/

HTML:

<div class="bs-example tooltip-demo"> 
    <div class="bs-example-tooltips"> 
     <input type="text" class="form-control" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title=""/>  
     <input type="text" class="form-control" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title=""/>  
     <input type="text" class="form-control" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title=""/> 
    </div> 
</div> 

的jQuery:

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

$('body').on('click', function (e) { 
    $('[data-toggle="popover"]').each(function() { 
     //the 'is' for buttons that trigger popups 
     //the 'has' for icons within a button that triggers a popup 
     if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { 
      $(this).popover('hide'); 
     } 
    });     
}); 

回答

7

我可以建議觸發酥料餅manually

var close = true; 
$('[data-toggle="popover"]').popover({trigger:"manual"}); 

$(document).on('mousedown', function (e) { 
    if($(e.target).hasClass('popover-content')) 
     close = false; 
    else 
     close = true; 
}); 

$('[data-toggle="popover"]').on("blur",function(){ 
    if(close) 
     $(this).popover('hide'); 
    else 
     $(this).focus(); 
}); 

$('[data-toggle="popover"]').on("focus",function(){ 
    if(close) 
     $(this).popover('show'); 
}); 

例子:Fiddle

更新修復了互聯問題:

更改.blur功能如下:

$('[data-toggle="popover"]').on("blur",function(){ 
    if(close) 
     $(this).popover('hide'); 
    else { 
     $(this).focus(); 
     close = true; 
    } 
}); 

Fiddle

+0

一旦顯示它沒有被隱藏,即使點擊body.this正在發生在最後的工具提示 –

+0

@susheel您使用的瀏覽器是什麼?在Chrome – Trevor

+0

中完美工作檢查最後一個工具提示點擊它,然後點擊外部我的意思是在身體..我使用鉻雖然 –