當鼠標懸停在文本上時，jquery工具提示不出現

我按照這個tutorial添加一個簡單的jQuery工具提示。本教程使用三個圖像來構建工具提示背景，但我只想使用一個。現在我試圖讓鼠標懸停在某些文本上時顯示工具提示。我不知道我是否犯了一個簡單的錯誤，或者如果代碼沒有意義。無論哪種方式，當我將鼠標懸停在文本上時，工具提示不會出現。當鼠標懸停在文本上時，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>

來源

2011-06-28 user701510

在此行中：

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

你左屬性設置爲p標籤的寬度，但你沒有設置寬度是p標籤上的寬度，因此其寬度是頁面的整個寬度。例如，當我厭倦它時，它將左側設置爲位於瀏覽器窗口一側的'1247px'。

來源

2011-06-28 23:40:46 Jeremy

我爲p設置了100的寬度，但是當我將鼠標懸停在文本上時，我只能看到這裏下載的圖像的一小部分http://flowplayer.org/tools/tooltip/index.html – user701510

因爲您正在使用作爲.toolTipPic中的css背景，您需要將寬度和高度設置爲圖像的大小。 – Jeremy

當鼠標懸停在文本上時，jquery工具提示不出現

回答

相關問題