私のJQuery show（）はIEでは動作しますがFFでは動作しませんか？

Question

私の.Net Webアプリケーションでは、ページに動的に配置される "skmTooltipHost"のクラスを持ついくつかの要素があります。

マウスをマウスの上に置くと、ツールチップの種類のポップアップが表示されます。これはIEでは完全に機能していますが、Firefoxではまったく機能していません。

助けてください！

私は最終的に行います異なるが、同様のコードのセットを使用

"ホバーやショーで"

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

私の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; 
} 

編集を行いジャバスクリプト作業。私は違いが何であるか分からない。私の作業のコードは以下の通りです：

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)あなたが使用しているCSS/HTML/JSですか？これはChromeとFirefoxでうまく動作します。この行は、おそらくあなたががやりたいことはありません。

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

Answer 2

問題を、私はそれがこれらの行にある参照よう：

この行は、DOMから除去するためのスパンをマーク。 これは消えて、もうコントロールをホバーしません。

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

この行は、DOMからコントロールを削除します。これはツールチップを指していると思うかもしれませんが、実際にはトップSPAN（またはあなたの場合はツールチップホスト）を指しています。

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

このコードは、仕事に証明した：

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

あなたがここでそれをテストすることができます。http://jsfiddle.net/ab4ML/2/

言及をmoeffjuにバイオリンを提供します。