Question

我正在尝试制作工具提示，我有以下HTML代码：

<img src="url here" class="tooltip" alt="sometext here"/><br>
<img src="url here" class="tooltip" alt="sometext here"/>

我有以下Jquery代码：

toolTip = function(){
     jQuery('<span class="tip"></span>').prependTo('body').hide();
     showTooltip = function(event){
         $thisTxt = jQuery(this).attr('alt');
         var tPosX = event.pageX - 5;
         var tPosY = event.pageY +20;
         jQuery('.tip').text($thisTxt).css({top:tPosY, left:tPosX}).fadeIn();
     };
     hideTooltip = function(){
         jQuery('.tip').fadeOut();
     };
     jQuery('.tooltip').hover(showTooltip , hideTooltip);
 };

jQuery(document).ready(function(){
     toolTip();
});

一切看起来都不错。但工具提示不会在img上方流动，而是始终保持在窗口的左上方。我搜索了其他帖子，他们认为这个位置应该是绝对的。然后我将小费css更改为

 jQuery('.tip').text($thisTxt)
               .css({top:tPosY, left:tPosX, position:"absolute" })
               .fadeIn();

但是提示根本没有出现。非常受欢迎。关于这个问题的任何提示都将不胜感激。

Answer 1

那应该是position: "absolute" - 请注意引号。您可能希望查看working example。

工具提示不起作用

1 个答案: