在鼠标悬停时显示像 jQuery Tooltip 这样的 div答案

【问题标题】：On mouse hover show a div like jQuery Tooltip在鼠标悬停时显示像 jQuery Tooltip 这样的 div
【发布时间】：2013-10-24 14:18:30
【问题描述】：

让我们考虑休闲场景

 <p>jhony</p>
 <p>ram</p>
 <p>lilly</p>

 <div id="about"></div>

 <script>
      $(function() {
          $('p').hover(function() { 
             $('#about').show(); 
               }, function() { 
                   $('#about').hide(); 
        });
     });

知道鼠标悬停在 p 标签上时 div 会显示，但它始终处于固定/绝对位置，但我想针对悬停元素显示它。

例子：

如果我将鼠标放在“jhony”上，那么关于 div 应该显示在左边，如果我将鼠标放在“ram”上，那么应该向左显示大约 div，如果我将鼠标放在“lilly”上，那么应该向左显示大约 div。

最后它应该像 jQuery Tooltip 一样工作了。

【问题讨论】：

为什么不使用 jQuery 工具提示？
看这个example，项目右侧有tooltip显示。
请查看 Jquery 网站，那里有很多信息
检查这个，同样的问题stackoverflow.com/questions/1254569/…
为此使用 offset.top。

标签： javascript jquery html css

【解决方案1】：

为什么要使用 jQuery 呢？你只能使用css

p:hover span{display : block}

或者如果你想使用 jQuery/js，你必须计算从窗口顶部到你的 p 的高度并为你的 div 设置它： $(function() { $('p').hover(function() { $('#about').css('top',this.offset().top )}

【讨论】：