1

ホバー可能な Jquery ツールチップを作成しようとしています。このツールチップは、要素にカーソルを合わせると表示され、ツールヒント自体にカーソルを合わせるとそのままになります。ツールチップは、元の要素またはツールチップ本体から離れた場合にのみ消えるはずです。

私が見つけた例に基づいて、この動作を作成することができましたが、Jquery は初めてなので、機能の改善についてコメントをいただければ幸いです。

コード：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script src="jquery-1.2.6.min.js"></script>
<style>
#tooltip{
       position:absolute;
       border:1px solid #333;
       background:#f7f5d1;
       padding:2px 5px;
       color:#333;
       display:none;
       text-align: left;
}

</style>


</head>
<body>

<script type="text/javascript">
jQuery.fn.extend({
       'tooltip': function(text){
                               xOffset = 10;
                               yOffset = 20;

                               var that = this;
                       $(this).mouseover(function(e){
                               this.t = text;
                               $("body").append("<div id='tooltip'>"+ this.t +"</div>");
                               $("#tooltip")
                                       .css('position', 'absolute')
                                       .css("top",(e.pageY - xOffset) + "px")
                                       .css("left",(e.pageX + yOffset) + "px")
                                       .fadeIn("fast");
                   });
                       $(this).mouseout(function(){
                               that.hide_ff = setTimeout('$("#tooltip").hidetooltip()', 1000);
                               $("#tooltip").hover(function(){
                                       clearTimeout (that.hide_ff);
                               },
                               function(){
                                       $("#tooltip").hidetooltip()
                               });

                               //$("#tooltip").hidetooltip()
                   });
                       $(this).mousemove(function(e){
                               $("#tooltip")
                                       .css("top",(e.pageY - xOffset) + "px")
                                       .css("left",(e.pageX + yOffset) + "px");
                       });
       },

       'hidetooltip': function()
       {
               var that = this;
               $(this).remove();
               if (that.hide_ff)
               {
                       clearTimeout (that.hide_ff);
               }
       }
});

</script>
<a id="fff">ToolTip</a>

<div id="tooltip_share_text" style="display:none">
       <div style="width: 100px;">
       This is a Tooltip.
       <br/>
       <a href="javascript:void(0)" onclick="alert('boo')"> Click Me</a>
       </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
       $("#fff").tooltip($('#tooltip_share_text').html());
});
</script>

</body>
</html>

最も気になるのは次の 2 点です。

  1. Jquery を 2 つの関数 (tooltip と hidetooltip) で拡張する必要がありました。拡張機能を 1 つだけ使用して同じ動作を実現したいのですが、うまくいきませんでした。
  2. 私が "that.hide_ff" を使用したのは正しくないようです。繰り返しますが、この変数は「ツールチップ」オブジェクトに属するべきだと思いますが、間違っていなければ、Jquery オブジェクト自体に関連付けられています。

また、その他の改善点を教えていただけると嬉しいです...

前もってありがとう、ゴルディ

4

3 に答える 3

2

JQuery 用のツールチップ プラグインがあります。自分で作成したい場合は、彼らが行ったことを見てアイデアを得ることができると確信しています.

于 2008-10-31T19:55:32.917 に答える
0

あなたがまだこれに興味を持っているかどうかはわかりません...ほぼ1年が経ちましたoO

しかし、私はあなたのコードを少し修正しました:

  • hidetooltip (追加の拡張機能) を削除しました
  • that.hide_ff を使用しても問題ないので、変更しませんでした
  • ツールチップはリンクの最後にポップアップ表示され、マウスで移動しません。見た目がすっきりしたと思います。
  • xOffset と yOffset を切り替えました
  • 元の mousemove コードをコメントアウトしたので、気に入らない場合は元に戻すことができます。
jQuery.fn.extend({
 'ツールチップ': 関数(テキスト){
  xオフセット = 10;
  y オフセット = 20;

  var that = this;
  $(this).mouseover(function(e){
   this.t = テキスト;
   $("body").append(""+ this.t +"");
   $("#ツールチップ")
    .css('位置', '絶対')
    .css("top",(this.offsetTop + yOffset) + "px") /* .css("top",(e.pageY - xOffset) + "px") */
    .css("left",(this.offsetLeft + this.offsetWidth) + "px") /* .css("left",(e.pageX + yOffset) + "px") */
    .fadeIn("速い");
  });
  $(this).mouseout(関数(){
   that.hide_ff = setTimeout('$("#tooltip").remove()', 500);
   $("#tooltip").hover(関数(){
    clearTimeout (that.hide_ff);
    }、
    関数（）{
     $("#tooltip").remove();
    }
   );
  });
/*
  $(this).mousemove(function(e){
   $("#ツールチップ")
    .css("トップ",(e.pageY - xOffset) + "px")
    .css("左",(e.pageX + yOffset) + "px");
  });
*/
 }
});
于 2009-08-27T02:22:29.410 に答える
0

qTipがツールチップのニーズをすべて満たしていることがわかりました。

于 2009-08-27T02:37:56.093 に答える