5

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

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

助けてください！

「ホバーして表示」を行うJavaScript

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

2 に答える 2

1

これ（jsfiddle）は使用しているCSS / HTML / JSですか？これはChromeとFirefoxで機能します。この行はおそらくあなたが望むことをしません：

$(".skmTooltipContainer").fadeTo(500, 1.0, function () { $(this).remove(); });
于 2013-03-12T12:45:29.417 に答える
1

私が見ている問題は、これらの行にあります。

この行は、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に言及してください。

于 2013-03-12T13:27:37.187 に答える