Bootstrap 按钮工具提示在单击时隐藏 [英] Bootstrap button tooltip hide on click

问题描述

在我的网站上，我有一些按钮.当用户单击按钮时，会打开一个模式.当用户悬停按钮时，会显示工具提示.

On my site I have some buttons. When a user clicks the button, a modal opens. When a user hovers the button, a tooltip is shown.

是否使用此代码:

<button type="button" rel="tooltip" title="Tooltip content" class="btn btn-sm btn-default" data-toggle="modal" data-target="#DeleteUserModal">
  <span class="glyphicon glyphicon-remove"></span>
</button>

<div>modal</div>

<script>
$(document).ready(function(){
  $('[rel="tooltip"]').tooltip();
});
</script>

这可行，但唯一的问题是单击按钮后工具提示仍然可见，并显示模态.一旦模态关闭，工具提示就会再次隐藏.

This works, but the only problem is that the tooltip stays visible after the button is clicked, and the modal is shown. As soon as the modal is closed, the tooltip is hidden again.

如何防止这种情况?我只希望在悬停时显示工具提示，而不是在相关模态可见时始终显示.

How to prevent this? I only want the tooltip to be shown on hover, and not all the time when the related modal is visible.

推荐答案

使用修复.

$(document).ready(function(){
    $('[rel=tooltip]').tooltip({ trigger: "hover" });
});

问题是当模态打开时焦点停留在按钮上.将触发器更改为悬停即可解决问题.

The problem was that focus stays on the button when the modal is open. Changing the trigger to hover solves the problem.

这篇关于Bootstrap 按钮工具提示在单击时隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！