Jquery-ui tooltip on click

Question

I'm trying to make a jquery-ui tooltip show/hide on a click event. Also I don't want it to show hide on mouse enter/leave.

Here is a fiddle with a normal tooltip : http://jsfiddle.net/Michael_0/sLhD9/ (unfortunately jsfiddle doesn't seem to be able to include jquery-ui from google cdn ?).

I had the idea to disabled the tooltip at initialization then enable it on click just before showing it, it works but I can't prevent the tooltip from hiding when the mouse leaves the target.

$("#myDiv").tooltip({
    disabled: true,
    content: function () {
        return "<div>Custom content</div>"
    }
});

$("#myDiv").click(function () {
        $(this).tooltip("option", "disabled", false);
        $(this).tooltip("open");
    });

So , you click a button and then tool tip appears ? Then how are you planning it to disappear ? — Runcorn
– Runcorn, Commented Jul 28, 2014 at 15:34
@Runcorn it should disappear on the next click but not on mouseleave — KVM
– KVM, Commented Jul 28, 2014 at 16:17

Fireandlight27 · Accepted Answer · 2014-07-28 15:51:58Z

1

To do this you need to unbind the default event handlers:

$("#myDiv").unbind('mouseover');
$("#myDiv").attr('ttVisible','no');
$("#myDiv").click(function() {
    if($("#myDiv").attr('ttVisible') == 'no') {
        $("#myDiv").tooltip('open');
        $("#myDiv").unbind('mouseleave');
        $("#myDiv").attr('ttVisible','yes');
    } else {
        $("#myDiv").tooltip('close');
        $("#myDiv").attr('ttVisible','no');
    }
});

You can track the current state however works for you, I used an attribute called ttVisible. jQuery UI doesn't seem to expose the current state of the tooltip in any way.

answered Jul 28, 2014 at 15:51

Fireandlight27

7165 silver badges9 bronze badges

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

1 Comment

KVM Over a year ago

unbind mouseleave doesn't seem to work, could you provide a jsfiddle please ?

Collectives™ on Stack Overflow

Jquery-ui tooltip on click

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