Question

如何使工具提示永不隐藏，除非单击实际的工具提示？弹出窗口会对此更好吗？

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。

Answer 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");
});

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

1 个答案: