Twitter bootstrap 引导按钮工具提示单击时隐藏

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

是否使用此代码：

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

情态动词
$（文档）.ready（函数（）{
$（'[rel=“tooltip”]'）。tooltip（）；
});

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

---

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

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

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

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

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

这里有一把小提琴向您展示这项工作

通过使用修复了它

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

---

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

如果要在执行操作之前关闭工具提示，可以使用以下方法：

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

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

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

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

---

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

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

       });
   });

---

在“文档就绪”功能中，请使用以下命令：

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

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

---

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

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

---

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

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

工具提示和模态

---

将

工具提示

和

模式

放在两个单独的元素上。

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

$（文档）.ready（函数（）{
$（'.btn primary'）。工具提示({
模板：“”，
标题：“工具提示示例”，
是的，
位置：'对'，
延误：250
});
});
$（'.btn primary'）.on（'show.bs.tooltip'，function（））{
$（this.attr（'data-tooltip'，'loaded'）；
});
$（'.btn primary'）.on（'hide.bs.tooltip'，function（））{
$（this.attr（'data-tooltip'，'hidden'）；
});
$（'.btn primary'）。在（'click'，function（）上{
var_tooltip=$（this.attr（'data-tooltip'）；
开关（工具提示）{
“已加载”案例：
if（$（this）.next（）.hasClass（'tooltip'））{
$（this.tooltip（'hide'）；
}否则{
$（this.tooltip（'show'）；
}
打破
“隐藏”案例：
$（this.tooltip（'show'）；
打破
}
});

引导示例
工具提示
使用$（'[rel=tooltip]'）。工具提示（'disable'）在onclick函数中，我尝试用包装按钮并从按钮本身删除工具提示。相同的效果。添加
data toggle=“tooltip”
不要使用rel。抱歉，相同的效果。似乎“焦点”一直停留在按钮上，因为它被点击了。当模式打开时，我仍然可以在背景中看到按钮周围的“辉光”。这很有帮助，但我仍然有一个类似的问题，即下拉切换工具提示。在一个带有下拉菜单的按钮上，我在按钮上有一个工具提示，当您单击它时，下拉菜单会显示，但工具提示仍然可见，尝试使用$（'body'）。单击（隐藏所有工具提示）说明应该会有所帮助。虽然给出的代码可能会解决querent的问题，解释一下代码的作用以及它解决问题的原因会更有帮助。没有解释的代码对于未来寻求解决类似问题的查询来说用处不大。欢迎来到堆栈溢出。虽然本准则可以回答该问题，但提供关于本准则为什么和/或如何回答该问题的附加上下文可提高其长期价值。亲切的问候。