引导按钮工具提示在单击时隐藏答案

【问题标题】：Bootstrap button tooltip hide on click引导按钮工具提示在单击时隐藏
【发布时间】：2016-05-06 21:25:04
【问题描述】：

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

是否使用此代码：

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

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

如何预防？我只希望在悬停时显示工具提示，而不是在相关模式可见时始终显示。

【问题讨论】：

在你的 onclick 函数中使用 $('[rel=tooltip]').tooltip('disable')

标签： twitter-bootstrap

【解决方案1】：

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

【讨论】：

我尝试用
包裹按钮并从按钮本身中删除工具提示。效果一样。
添加data-toggle="tooltip"不要使用rel。
对不起，效果一样。似乎“焦点”以某种方式停留在按钮上，因为它已被单击，当模式打开时，我仍然可以在背景中看到按钮周围的“发光”。

【解决方案2】：

您应该使用单击功能手动打开模式，并通过 jquery 手动隐藏工具提示。因此，将模态切换属性从按钮中取出，如下所示：

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

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

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

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

【讨论】：

【解决方案3】：

通过使用修复它。

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

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

【讨论】：

这有帮助，但下拉切换工具提示仍然存在类似问题。在带有下拉菜单的按钮上，我在按钮上有一个工具提示，当您单击它时，下拉菜单会显示，但工具提示仍然可见，很容易 $('body').click( 隐藏所有工具提示)

【解决方案4】：

如果你想在操作之前关闭工具提示，可以使用这个：

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

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

解释应该有所帮助。
虽然给出的代码可能会解决询问者的问题，但最好解释一下代码的作用以及为什么它可以解决所提出的问题。没有解释的代码对于希望解决类似问题的未来查询者不太有用。

【解决方案6】：

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

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

       });
   });

【讨论】：

【解决方案7】：

在你的文档准备函数中使用这个：

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

【解决方案10】：

Bootstrap 3 按钮工具提示悬停并单击：

$(document).ready(function(){
  $('.btn-primary').tooltip({
        template: '<div class="tooltip svg__icon_c_tooltip_right" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
        title: 'Tooltip Example',
        html: true,
        placement: 'right',
        delay: 250
    });
});

$('.btn-primary').on('shown.bs.tooltip', function() {
    $(this).attr('data-tooltip', 'loaded');
});

$('.btn-primary').on('hide.bs.tooltip', function() {
    $(this).attr('data-tooltip', 'hidden');
});

$('.btn-primary').on('click', function() {
    var _tooltip = $(this).attr('data-tooltip');

    switch(_tooltip) {
    case 'loaded':
      if ($(this).next().hasClass('tooltip')) {
        $(this).tooltip('hide');
      } else {
        $(this).tooltip('show');
      }
      break;
    case 'hidden':
      $(this).tooltip('show');
      break;
    }
});

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div style="margin-top: 20px">
    <button type="button" class="btn btn-primary">Tooltip</button>
  </div>   
</div>
</body>
</html>

【讨论】：

嗨邦迪戈。欢迎来到堆栈溢出。虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。 How to Answer。亲切的问候。