0

このチュートリアルに従って、単純な jquery ツールチップを追加しています。チュートリアルでは 3 つの画像を使用してツールヒントの背景を作成していますが、使用したいのは 1 つだけです。現在、特定のテキストにカーソルを合わせるとツールチップが表示されるようにしようとしています。単純な間違いを犯しているのか、それともコードが意味をなさないのかはわかりません。いずれにせよ、テキストの上にカーソルを置いてもツールチップは表示されません。

スクリプトの私のバージョンは次のとおりです。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('.toolTip').hover(
    function() {
    this.tip = this.title;
    $(this).append(
     '<div class="toolTipWrapper">'
        +'<div class="toolTipPic">'

          +this.tip
       +'</div></div>'
    );
    this.title = "";
    this.width = $(this).width();
    $(this).find('.toolTipWrapper').css({left:this.width-22})
    $('.toolTipWrapper').fadeIn(300);
  },
    function() {
      $('.toolTipWrapper').fadeOut(100);
      $(this).children().remove();
        this.title = this.tip;
      }
  );
});
</script>

<style type="text/css">
.toolTip {}
.toolTipWrapper {
        width: 175px;
        position: absolute;
        top: 20px;
        display: none;
        color: #FFF;
        font-weight: bold;
        font-size: 9pt;
}
.toolTipPic {
        width: 175px;
        background: url(tooltip.png) no-repeat;
}

</style>
</head>
<body>
<p class="toolTip" title="This is the tooltip text">Hover over me for tooltip </p>

</body>
</html>
4

1 に答える 1

2

この行で：

$(this).find('.toolTipWrapper').css({left:this.width-22});

left プロパティを p タグの幅に設定していますが、p タグに幅を設定していないため、その幅はページ全体の幅です。たとえば、これに飽きたとき、ブラウザウィンドウの横にあった「1247px」に左に設定しました。

于 2011-06-28T23:40:46.590 に答える