0

我正在按照本教程添加一个简单的 jquery 工具提示。本教程使用三张图像来构建工具提示背景，但我只想使用一张。现在，当我将鼠标悬停在某些文本上时，我正试图让工具提示出现。我不知道我是在犯一个简单的错误还是代码没有意义。无论哪种方式，当我将鼠标悬停在文本上时，工具提示都不会出现。

这是我的脚本版本：

<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 回答