:hover property not working on Firefox/IE

Question

When hovering over a field on a table I'm appending a div to that field and showing some text in the newly added field (a tooltip). When hovering out the table field I want it to be closed, but I want it to remain open as long as I'm within it child element (the newly added div). It works fine on Chrome but not in FF/IE

$(document).ready(init);

function init(){
  $('table td.column_5').on('mouseover', show_tooltip);
  $('.tooltip, table td.column_5').on('mouseout',remove_tooltip);
}
function show_tooltip(e){
    if ($(e.target).text() !== '' && !$(this).children().hasClass('tooltip')){
        var tooltip = '<div class="tooltip">'+$(e.target).text()+'</div>';
        $(this).append(tooltip);
    }
}
function remove_tooltip(e){
  if ($(this).children().hasClass('tooltip') && !$(this).children('.tooltip').is(':hover')){
    $('.tooltip').remove();
}

`is(':hover')` is not something you should use, there are [proper ways to check if the an element is hovered](http://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery/1273609#1273609) — adeneo, Apr 21 '16 at 00:41

Michael Mano · Answer 1 · 2016-04-21T23:19:08.890

OK I took a closer look. Please remove the downvote now :) here is what was wrong.

function remove_tooltip(e) {
  if ($(this).children().hasClass('tooltip') && !$(this).children('.tooltip').is(':hover'){
    $('.tooltip').remove();
}

You are missing a closing ) and a closing } for instance use the code below

$(document).ready(init);

function init(){
  $('table td.column_5').on('mouseover', show_tooltip);
  $('.tooltip, table td.column_5').on('mouseout',remove_tooltip);
}
function show_tooltip(e){
    if ($(e.target).text() !== '' && !$(this).children().hasClass('tooltip')){
        var tooltip = '<div class="tooltip">'+$(e.target).text()+'</div>';
        $(this).append(tooltip);
    }
}
function remove_tooltip(e) {
  if ($(this).children().hasClass('tooltip') && !$(this).children('.tooltip').is(':hover')){
    $('.tooltip').remove();
  }
}

@Unifx I'm sorry, my mistake. I missed the ')' when typing the question. That's not the problem though, my code is right, includes the missing ')'. i fixed this in the question. Btw, downvote wasn't mine — Sebastian, Apr 22 '16 at 16:43

Sebastian · Accepted Answer · 2016-04-22T17:45:14.537

I found a way to do it! Here's how I proceeded:

$(document).ready(init);

function init(){
  $('table td.column_5').on('mouseover', show_tooltip);
  $('.tooltip, table td.column_5').on('mouseout',remove_tooltip);
}
function show_tooltip(e){
    if ($(e.target).text() !== '' && !$(this).children().hasClass('tooltip')){
        var tooltip = '<div class="tooltip">'+$(e.target).text()+'</div>';
        $(this).append(tooltip);
    }
}
function remove_tooltip(e){
  var event = e.toElement || e.relatedTarget;

    if (event.parentNode == this || event == this){
        return;
    }

    $('.tooltip').remove();    
}

:hover property not working on Firefox/IE

2 Answers2