如何通过单击使工具提示隐藏？答案

【问题标题】：How to make tooltips hide by clicking on them?如何通过单击使工具提示隐藏？
【发布时间】：2018-10-08 19:49:42
【问题描述】：

除非单击实际的工具提示，否则如何使工具提示永远不会隐藏？弹出框会更好吗？

var Button = document.querySelector('.Button');

$(Button).attr("data-toggle", "tooltip");
$(Button).attr("data-placement", "top");
$(Button).attr("title", "SHOWING TOOLTIP");

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

if(status == true) {

        $(Button).tooltip('show');
        $(Button)
            .mouseenter(function() {
                $(this).tooltip('show');
            })
            .mouseleave(function() {
                $(this).tooltip('show');
            });
        $(Button).click(function() {
                console.log("clicked tooltip");
                $(this).tooltip('hide');
            });
    }

我有 mouseenter 和 mouseleave 方法的原因是这是我能够让工具提示永久显示的唯一方法。

我遇到的问题是，如果我单击工具提示，它不会隐藏工具提示，它实际上只是单击按钮元素。有没有办法解决？我试图实现的目标是工具提示应永久显示，然后在单击工具提示时隐藏。

编辑：我将 Bootstrap 与 jQuery 一起用于工具提示。

【问题讨论】：

工具提示使用的是什么库？
方法.tooltip()从何而来？ javascript 和 jquery 都没有一个名为 that 的方法。
我将 Bootstrap 与 jQuery 一起用于工具提示。
您应该保留默认行为，因为用户已经习惯了，并且避免为可能正在使用屏幕阅读器的视障用户破坏您的页面。

标签： javascript jquery bootstrap-4

【解决方案1】：

一旦显示工具提示，您可以连接点击事件以隐藏它...

$('[data-toggle=tooltip]').on('shown.bs.tooltip', function () {
    $(".tooltip-inner").click(function(e){
        $('[data-toggle=tooltip]').tooltip("hide");
    });
});

https://www.codeply.com/go/6M28mCZHwE

如果您仅希望工具提示本身隐藏工具提示，请将数据触发器更改为 manual 并添加一个单击处理程序以显示工具提示。这将防止触发器隐藏工具提示。

$('[data-toggle=tooltip]').click(function(){
    $(this).tooltip("show");
});

【讨论】：