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

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

javascript jquery css

Javascript 当鼠标悬停在文本上时，jquery工具提示不出现,javascript,jquery,css,jquery-tooltip,Javascript,Jquery,Css,Jquery Tooltip,下面我将添加一个简单的jquery工具提示。本教程使用三个图像来构建工具提示背景，但我只想使用一个。现在，当我将鼠标悬停在特定文本上时，我正试图使工具提示出现。我不知道我是否犯了一个简单的错误，或者代码是否没有意义。无论哪种方式，当我将鼠标悬停在文本上时，工具提示都不会出现以下是我的脚本版本： <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

下面我将添加一个简单的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>


$（文档）.ready（函数（）{
$（'.toolTip'）。悬停(
函数（）{
this.tip=this.title；
$（此）。附加(
''
+''
+这是小费
+''
);
this.title=“”；
this.width=$（this.width（）；
$（this.find（'.toolTipWrapper'）.css（{left:this.width-22}）
$（'.toolTipWrapper'）.fadeIn（300）；
},
函数（）{
$（'.toolTipWrapper'）.fadeOut（100）；
$（this.children（）.remove（）；
this.title=this.tip；
}
);
});
.工具提示{}
.toolTipWrapper{
宽度：175px；
位置：绝对位置；
顶部：20px；
显示：无；
颜色：#FFF；
字体大小：粗体；
字号：9pt；
}
.工具提示{
宽度：175px；
背景：url（tooltip.png）不重复；
}
将鼠标悬停在我身上查看工具提示

在这一行：

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

您将left属性设置为p标记的宽度，但尚未设置p标记的宽度，因此其宽度是页面的整个宽度。例如，当我对此感到厌倦时，它将左侧设置为“1247px”，这是在浏览器窗口的一侧。

我将宽度设置为100，但当我将鼠标悬停在文本上时，我只看到我在此处下载的图像的一小部分，因为您正在使用is作为css背景。工具提示，您需要将宽度和高度设置为图像的大小。