.on("hover", ...) chaining not working

Question

I have a js file that has .on("click" , ..) chaining happening that I would like to also add a hover event to. My code is:

}).on('hover' , '.tooltip' , function (e) {
   if (e.type == "mouseenter") {
      var tip = $(this).attr('title');
      var tipTemp = $(this).attr('data-title', tip);
      $('#tooltip').remove();
      $(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
      $(this).removeAttr('title');      
      $('#tooltip').fadeIn(300);
    }else{
      $(this).attr('title', $(this).attr('data-title'));
      $('#tooltip').fadeOut(300);
      $(this).removeAttr('data-title');
    }
});

I understand that I can really only pass one function this way so I am checking for the event type to trigger the appropriate behavior. This doesn't seem to be working for me. Any ideas?

`.hover` is just shorthand for `.mouseenter` and `.mouseleave`. — j08691, Jul 08 '15 at 16:55
hover isn't a DOM event. https://developer.mozilla.org/en-US/docs/Web/Events — Howard Renollet, Jul 08 '15 at 17:06

score 1 · Accepted Answer · answered Jul 08 '15 at 17:00

I think this is what you want

}).on('mouseenter' , '.tooltip' , function (e) {
    var tip = $(this).attr('title');
    var tipTemp = $(this).attr('data-title', tip);
    $('#tooltip').remove();
    $(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
    $(this).removeAttr('title');      
    $('#tooltip').fadeIn(300);
});

}).on('mouseleave' , '.tooltip' , function (e) {
    $(this).attr('title', $(this).attr('data-title'));
    $('#tooltip').fadeOut(300);
    $(this).removeAttr('data-title');
});

This did it. Dipak's solution probably would work too but I wanted to uphold the chaining in the code. N0ir's suggestion did the trick. — Rob M, Jul 15 '15 at 00:21

dfsq · Answer 2 · 2015-07-08T17:14:43.303

0

You can bind several event handlers at once. In your case it will be:

.on('mouseenter mouseleave' , '.tooltip' , function (e) { ... });

edited Jul 08 '15 at 17:14

answered Jul 08 '15 at 16:57

dfsq

191,768
25
236
258

http://stackoverflow.com/questions/2534089/jquery-multiple-events-to-trigger-the-same-function – Mateutek Jul 08 '15 at 16:59

Dipak · Answer 3 · 2015-07-08T17:11:05.157

You don't need if (e.type == "mouseenter") {

And hover is not a valid method to use with .on() - I am not sure about this though.. use mouseover or mouseenter

Use it as:

$('.tooltip-holder').on('mouseover' , '.tooltip' , function () {
      var tip = $(this).attr('title');
      var tipTemp = $(this).attr('data-title', tip);
      $('#tooltip').remove();
      $(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
      $(this).removeAttr('title');      
      $('#tooltip').fadeIn(300);      
});

$('.tooltip-holder').on('mouseout' , '.tooltip' , function () {
      $(this).attr('title', $(this).attr('data-title'));
      $('#tooltip').fadeOut(300);
      $(this).removeAttr('data-title');
});

Fiddle

lshettyl · Answer 4 · 2015-07-08T18:05:33.297

As per jQuery source code, hover is not included in the event list that triggered leading to JQuery .on() because .hover() is just a shortcut for JQuery .mouseenter() and .mouseleave(). So, in short, you cannot use hover with .on() like below:

}).on('hover' , '.tooltip' , function (e) {...

So, your option is to use .mouseenter() and .mouseleave() like below:

.on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, '.tooltip');

.on("hover", ...) chaining not working

4 Answers4