如何在jQuery click函数中添加和显示Bootstrap工具提示? [英] How to add and show a Bootstrap tooltip inside a jQuery click function?

问题描述

我正在尝试从jQuery的click函数中添加并显示Bootstrap 3工具提示.

I am trying to add and display a Bootstrap 3 tooltip from within a click function in jQuery.

当我为点击处理程序使用匿名函数时，它很好用，但是如果我尝试将代码放入命名函数中，则会出现错误TypeError: undefined is not a function (evaluating '$button.tooltip(...

It works well when I'm using an anonymous function for the click handler, but if I try to place the code into a named function I get the error TypeError: undefined is not a function (evaluating '$button.tooltip(...

JS文件的内容如下.这是在jQuery和bootstrap.min.js之后加载的.

The contents of the JS file is below. This is loaded after both jQuery and bootstrap.min.js.

$(function() {
    function confirmClick(event) {
        event.preventDefault();

        $button = event.target;
        console.log($button);

        $button.tooltip({
            title: 'Are you sure?',
            trigger: 'manual',
        }).tooltip('show');

        $button.unbind('click');
    }

    $('.btn-confirm').click(confirmClick);
})

最终，我希望使用setTimeout重新添加点击处理程序并在X秒后隐藏工具提示.

Ultimately, I'm looking to use setTimeout to re-add the click handler and hide the tooltip after X seconds.

最终的行为将是用户单击按钮，出现一个工具提示，询问您确定吗?"如果他们在X秒钟前再次单击，则会跟随该链接.如果没有，则工具提示将被隐藏，并为下次单击准备相同的操作.

The end behavior will be the user clicking on the button, a tooltip appearing asking "Are you sure?" and if they click again before X seconds the link is followed. If not, the tooltip is hidden and the same action is prepared for the next click.

我也尝试过使用手册或单击触发器来添加工具提示，然后从ConfirmClick()函数中进行操作，但是从命名的click函数中尝试击打.tooltip的任何尝试似乎都失败了.

I've also tried adding the tooltip using wither a manual or click trigger and then manipulating it from within the confirmClick() function, but any attempt to hit .tooltip from within a named click function seems to fail.

推荐答案

您需要使用jQuery选择器包装目标才能使用.tooltip().

You need to wrap your target with jQuery selector to use .tooltip().

执行$button = $(event.target);而不是$button = event.target;.

在且仅当您的变量存储了jQuery对象时，才在变量中添加$.

Prepend your variable with $ if, and only if, your variable stores a jQuery object.

这篇关于如何在jQuery click函数中添加和显示Bootstrap工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！