Question

我正在关注此tutorial添加一个简单的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>

Answer 1

在这一行：

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

您将left属性设置为p标记的宽度，但是您没有在p标记上设置宽度，因此其宽度是页面的整个宽度。例如，当我厌倦了它时，它将左侧设置为“1247px”，它位于浏览器窗口的一侧。

当鼠标悬停在文本上时，jquery工具提示不显示

1 个答案: