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

发布于 2024-11-17 18:03:12 字数 1488 浏览 6 评论 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>

原文

I'm following this tutorial to add a simple jquery tooltip. The tutorial uses three images to construct the tooltip background but I only want to use one. Right now I'm trying to make the tooltip appear when I hover over certain text. I don't know if I'm making a simple mistake or if the code doesn't make sense. Either way, the tooltip won't appear when I hover over the text.

Here is my version of the script:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

随心而道 2024-11-24 18:03:12

在这一行：

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

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

On this line:

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

You setting the left property to the width of the p tag, but you haven't set a width on the p tag so its width is the whole width of the page. For example when I tired this it set left to '1247px' which was of to the side of the browser window.

回复收藏 0 原文

~没有更多了~