How to make jQueryUI tooltip apply only on focus

Question

How can I make the new JqueryUI tooltip visible only on focus: At the moment its on focus and on hover. I believe this is since JqueryUI 1.9

Wow such a simple question but I don't see a simple answer :( — Andrew Whitaker, Nov 05 '12 at 19:09

score 38 · Accepted Answer · answered Feb 21 '13 at 08:30

38

A bit shorter way:

$(".selector").tooltip().off("mouseover mouseout");

answered Feb 21 '13 at 08:30

lxgreen

1,511
15
14

14

+1 this worked for what I needed, the opposite, wanted them on mouse only, not focus: $(element).tooltip().off("focusin focusout"); – eselk Apr 01 '13 at 21:53
1

An add-on to the answer: `.off("mouseover mouseout");` will off all mouse over/out events. If you are using them, they will be unbind too. To make sure you are just doing `off` on the tooltip's ones, do like this: `$(".selector").tooltip(); var tooltipInstanceNamespace = $(".selector").tooltip("instance").eventNamespace; $(".selector").off('mouseover'+tooltipInstanceNamespace' mouseout'+tooltipInstanceNamespace);` This will off only the listeners with that tooltip instance namespace. – RaphaelDDL Oct 03 '14 at 18:28

score 15 · Answer 2 · answered Nov 05 '12 at 19:17

15

This isn't ideal, but it should work:

$(".selector").tooltip({
    disabled: true
}).on("focusin", function () {
    $(this)
        .tooltip("enable")
        .tooltip("open");
}).on("focusout", function () {
    $(this)
        .tooltip("close")
        .tooltip("disable");
});

Basically, enable/open the tooltip on focusin and disable/close on focusout.

Example: http://jsfiddle.net/WmRuN/

answered Nov 05 '12 at 19:17

Andrew Whitaker

124,656
32
289
307

I suspected something like this would be needed. Thanks. – Mark W Nov 06 '12 at 10:14
2

Also. One problem I didn't think about with this, is that the browser inserts the standard titles on hover. :( – Mark W Nov 08 '12 at 10:21

How to make jQueryUI tooltip apply only on focus

2 Answers2