[英]Bootstrap tooltip hidden by parent div
I'm using Bootstrap tooltips on my web app and they were being cut off by it's parent div. 我在我的Web应用程序上使用了Bootstrap工具提示,但它们的父div已将其切断。
To solve this I added data-container="body" 为了解决这个问题,我添加了data-container =“ body”
<a href="/some-path" title="Show tool tip" data-container="body" data-toggle="tooltip">Hello</a>
This solved the problem but a new problem came with it. 这解决了问题,但是随之带来了一个新问题。
When I click on the anchor and navigate the tooltip won't disappear. 当我单击锚点并导航时,工具提示不会消失。
Has anyone come across this? 有人遇到过这个吗? Is there a simple way to solve this?
有解决这个问题的简单方法吗?
EDIT - JSFiddle similar to my problem http://jsfiddle.net/m9AX5/5/ except in my case the parent div doesnt get removed. 编辑 -JSFiddle与我的问题http://jsfiddle.net/m9AX5/5/类似,除了在我的情况下,父div不会被删除。
It happens because the mouseleave isn't detected. 发生这种情况是因为未检测到mouseleave。
One solution is to hide tooltip on click action: 一种解决方案是在点击操作中隐藏工具提示:
$('#button').on('click', function () {
$(this).tooltip('hide')
})
Example: http://jsfiddle.net/m9AX5/6/ 示例: http : //jsfiddle.net/m9AX5/6/
Hope it helps. 希望能帮助到你。
As Andre mentioned, the mouseleave event isn't fired, so the tooltip doesn't get removed. 正如Andre所提到的,mouseleave事件不会被触发,因此工具提示不会被删除。
To do the same thing as hiding the tooltip, you can simply trigger the mouseleave event manually ( Updated JSFiddle ). 要执行与隐藏工具提示相同的操作,您可以简单地手动触发mouseleave事件(已更新JSFiddle )。
$(this).trigger('mouseleave');
While you haven't explained what happens when you click the element in your case, I would guess it's because the element was removed and the mouseleave event is never triggered. 尽管您还没有解释单击案例中的元素时会发生什么,但是我猜这是因为元素被删除并且mouseleave事件从未触发。 In this case, you should write an event listener and trigger the mouseleave element manually:
在这种情况下,您应该编写一个事件侦听器并手动触发mouseleave元素:
$('#anchor').click(function(){
$(this).trigger('mouseleave');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.