Meine JQuery show() funktioniert in IE aber nicht FF?

Question

In meiner .Net Web App habe ich einige Elemente mit einer Klasse von "skmTooltipHost", die dynamisch auf einer Seite platziert werden.

Wenn sich die Maus über ihnen befindet, sollte ein Tool-Tipp-Popup angezeigt werden. Dies funktioniert perfekt in IE, aber überhaupt nicht in Firefox.

Bitte helfen!

Die Javascript, die dem "On Hover und Show"

.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; 
} 

bearbeiten

habe ich schließlich eine Reihe von unterschiedlichen, aber ähnlichen Code

$(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(); }); 
    }); 
}); 

Meine CSS tut das tut Arbeit. Ich bin mir nicht sicher, was der Unterschied ist. Mein Arbeits Code ist unten:

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

Ist this (jsfiddle) die CSS/HTML/JS Sie verwenden? Das funktioniert bei mir in Chrome und Firefox. Diese Linie wahrscheinlich nicht tut, was Sie wollen, obwohl:

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

Answer 2

Das Problem, wie ich es in diesen Zeilen sehen:

Diese Linie markiert die Spanne für die Entfernung aus dem DOM. So verschwindet es und Sie schweben nicht mehr das Steuerelement.

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

Diese Zeile entfernt ein Steuerelement aus dem DOM. Sie würden denken, dies bezieht sich auf den Tooltip, bezieht sich aber tatsächlich auf den oberen SPAN (oder Tooltip-Host in Ihrem Fall).

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

Dieser Code erwiesen an die Arbeit: http://jsfiddle.net/ab4ML/2/

Erwähnung an moeffju für die Bereitstellung der Geige:

$(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(); }); 
    }); 
}); 

Sie hier testen können.