Question

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

使用此代码：

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

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

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

Answer 1

使用。修正了它。

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

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

Answer 2

对于整个项目，隐藏工具提示

master

Answer 3

您应该使用on click功能手动打开模态，并通过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

的小提琴

Answer 4

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

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

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

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

Answer 5

尝试使用此Javascript代码，我刚刚尝试了一下，它对我有用。

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

Answer 6

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

Answer 7

在文档准备功能中使用以下命令：

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

Answer 8

我知道这很老了，但这是按钮上的工具提示以启动模式的最简单的解决方法...

<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放在2个单独的元素上。

Answer 9

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>

单击时，Bootstrap按钮工具提示隐藏

10 个答案: