twitter-bootstrap Bootstrap 按钮工具提示在单击时隐藏

Bootstrap button tooltip hide on click

提问by Mbrouwer88

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.

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

Is use this code:

是使用这个代码：

<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.

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

回答by Mbrouwer88

Fixed it by using.

通过使用修复它。

$(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.

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

回答by Adnan Ahmad

For your whole project hide tooltip

为您的整个项目隐藏工具提示

   $(document).ready(function(){
       $('[data-toggle="tooltip"]').click(function () {
          $('[data-toggle="tooltip"]').tooltip("hide");

       });
   });

回答by Steve K

You should open the modal manually with an on click function and hide the tooltip manually via jquery. So take the modal toggling attributes out of the button like so:

您应该使用点击功能手动打开模态并通过 jquery 手动隐藏工具提示。因此，像这样从按钮中取出模态切换属性：

<button type="button" rel="tooltip" title="Tooltip content" class="btn btn-sm btn-default">
  <span class="glyphicon glyphicon-remove"></span>
</button>

and then open the modal with your own jquery onclick function as well as hide the tooltip at the same time like so:

然后使用您自己的 jquery onclick 函数打开模态并同时隐藏工具提示，如下所示：

$(document).ready(function(){
  $('[rel="tooltip"]').tooltip();
  $('[rel="tooltip').on('click', function () {
    $(this).tooltip('hide');
    $("#DeleteUserModal").modal();
  });
});

Here is a fiddle to show you this working Fiddle

这是一个向您展示这个工作小提琴的小提琴

回答by Siva Ganesh

Inside your document ready function use this:

在您的文档就绪功能中使用这个：

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

回答by RKS

Try to use this Javascript code, I just tried it, and it worked for me.

尝试使用此 Javascript 代码，我刚刚尝试过，它对我有用。

$(function () {
    $('body').tooltip({
        selector: '[data-toggle="tooltip"]'
    }).click(function () {
        $('[data-toggle="tooltip"]').tooltip("hide");
    });
})

回答by tyrodeveloper

If you want to close the tooltip before an action, can use this:

如果要在操作前关闭工具提示，可以使用以下命令：

$('[data-toggle="tooltip"]').tooltip("hide");

For example, i want to close the tooltip before open modal, here my code:

例如，我想在打开模态之前关闭工具提示，这里是我的代码：

function OpenModal() {
    $('[data-toggle="tooltip"]').tooltip("hide");
    $("#myModal").modal();
}

回答by Pankaj Upadhyay

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

回答by mokiSRB

Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.

不要在同一元素上使用来自多个插件的数据属性。例如，按钮不能同时具有工具提示和切换模式。为此，请使用包装元素。

回答by Scotty G

I know this is old but here is the easiest fix for a tooltip on a button to launch a modal ...

我知道这是旧的，但这里是按钮上的工具提示启动模态的最简单的修复......

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
    <span data-toggle="modal" data-target="#exampleModal">Tooltip & modal</span>
</button>

Put the tooltipand modalon 2 separate elements.

将tooltip和modal放在 2 个单独的元素上。