How to add and show a Bootstrap tooltip inside a jQuery click function?

Question

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

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

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

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

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.

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.

Try $button = $(event.target);

D4V1D
– D4V1D

2015-04-02 05:32:04 +00:00
Commented Apr 2, 2015 at 5:32 — D4V1D
– D4V1D, Commented Apr 2, 2015 at 5:32
@D4V1D That was it! Post an answer and I'll accept it.

Steven Sokulski
– Steven Sokulski

2015-04-02 05:36:53 +00:00
Commented Apr 2, 2015 at 5:36 — Steven Sokulski
– Steven Sokulski, Commented Apr 2, 2015 at 5:36

D4V1D · Accepted Answer · 2015-04-02 05:37:30Z

1

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

Do $button = $(event.target); instead of $button = event.target;.

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

answered Apr 2, 2015 at 5:37

D4V1D

5,8493 gold badges34 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steven Sokulski Over a year ago

Thank you! I had forgotten that event.target is the bare element.

Collectives™ on Stack Overflow

How to add and show a Bootstrap tooltip inside a jQuery click function?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related