My JQuery show() funziona in IE ma non in FF?

Question

Nella mia app Web .Net, ho alcuni elementi con una classe di "skmTooltipHost" che sono posizionati dinamicamente su una pagina.

Quando il mouse viene posizionato su di essi, dovrebbe essere visualizzato un popup di tipo punta di utensile. Funziona perfettamente in IE, ma non in Firefox.

Si prega di aiuto!

Il javascript che fa "On Hover e Show"

$(document).ready(function() { 
    $(".skmTooltipHost").hover(function() { 
     $(this).empty().append('<div class="skmTooltipContainer"><strong>hello</strong>' + $(this).attr('tooltip') + '</div>'); 
     $(this).find('.skmTooltipContainer').css("left", $(this).position().left + 20); 
     $(this).find('.skmTooltipContainer').css("top", $(this).position().top + $(this).height()); 
     $(".skmTooltipContainer").css("display", "inline-block"); 
     $(".skmTooltipContainer").show(); 
     $(this).show(); 
    },function() {  
    $(".skmTooltipContainer").fadeTo(500, 1.0, function() { $(this).remove(); }); 
    }); 
}); 

mio CSS

.skmTooltipHost 
{ 
cursor: help; 
border-bottom: dotted 1px brown; 

} 

.skmTooltipContainer 
{ 
padding-left: 10px; 
padding-right: 10px; 
padding-top: 3px; 
padding-bottom: 3px; 
display:inline-block; 
position: absolute!important; 
background-color: #ff9; 
border: solid 1px #333; 
z-index: 999; 
} 

Modifica

fine ho usato un set di codice diverso ma simile che fa lavoro. Non sono sicuro di quale sia la differenza. Il mio codice di lavoro è al di sotto:

function simple_tooltip(target_items, name) { 
     $(target_items).each(function (i) { 
      $("body").append("<div class='" + name + "' id='" + name + i + "'><p>Click for a link to the run details</br><strong>Server: </strong>" + $(this).attr('title') + "</br><strong>Information:</strong>" + $(this).attr('error') + "</p></div>"); 
      var my_tooltip = $("#" + name + i); 

      $(this).removeAttr("title").mouseover(function() { 
       my_tooltip.css({ opacity: 0.8, display: "none" }).fadeIn(100); 
      }).mousemove(function (kmouse) { 
       my_tooltip.css({ left: kmouse.pageX + 15, top: kmouse.pageY + 15 }); 
      }).mouseout(function() { 
       my_tooltip.fadeOut(100); 
      }); 
     }); 
    } 
    $(document).ready(function() { 
     simple_tooltip($(".skmTooltipHost"), "tooltip"); 
    }); 



.tooltip{ 
position:absolute; 
z-index:999; 
left:-9999px; 
background-color:#dedede; 
padding:2px; 
border:1px solid #fff; 
width:250px; 

}

.tooltip p{ 
    margin:0; 
    padding:0; 
    color:black; 
    background-color:white; 
    padding:2px 7px; 
} 

Answer 1

È this (jsfiddle) il CSS/HTML/JS stai usando? Funziona per me in Chrome e Firefox. Questa linea, probabilmente non fare quello che vuoi però:

$(".skmTooltipContainer").fadeTo(500, 1.0, function() { $(this).remove(); }); 

Answer 2

Il problema come la vedo io è in quelle righe:

Questa linea segna l'arco per la rimozione dal DOM. Quindi scompare e non si sposta il controllo più.

$(this).empty().append('<div class="skmTooltipContainer"><strong>hello</strong>' + $(this).attr('tooltip') + '</div>'); 

Questa riga rimuove un controllo dal DOM. Si potrebbe pensare che questo si riferisca al suggerimento, ma in realtà si riferisce allo SPAN principale (o host del tooltip nel tuo caso).

$(".skmTooltipContainer").fadeTo(500, 1.0, function() { $(this).remove(); }); 

Questo codice dimostrato di funzionare:

$(document).ready(function() { 
    $(".skmTooltipHost").hover(function() { 
     $(this).append('<div class="skmTooltipContainer"><strong>hello</strong>' + $(this).attr('tooltip') + '</div>'); 
     $(this).find('.skmTooltipContainer').css("left", $(this).position().left + 20); 
     $(this).find('.skmTooltipContainer').css("top", $(this).position().top + $(this).height()); 
     $(".skmTooltipContainer").css("display", "inline-block"); 
     $(".skmTooltipContainer").show(); 
     $(this).show(); 
    },function() {  
    $(".skmTooltipContainer").fadeTo(500, 1.0, function() { $(".skmTooltipContainer").remove(); }); 
    }); 
}); 

È possibile verificare qui: http://jsfiddle.net/ab4ML/2/

Menzione al moeffju per fornire il violino.