2014-01-28 21 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

中完美工作检查最后一个工具提示点击它,然后点击外部我的意思是在身体..我使用铬虽然 –