如何使用jquery制作简单的mouseon弹出式工具提示？

Question

我想显示所列信息的相关工具提示，相关工具提示和信息位于表格中的同一单元格中。我不想为此使用插件。当onmouseover到任何链接时，显示相关的工具提示，如果onmouseover到工具提示框，工具提示框将不会关闭。当在工具提示框或相关链接以外的页面上发布任何区域时，工具提示框将关闭。我想做一个简单的工具提示，就像这个插件http://stevenbenner.github.io/jquery-powertip/（鼠标弹出示例）。有没有一个简单的方法，而不使用插件？

HTML

<table width="600"> 
<tr> 
    <td>         
     <a href="#" class="link">Link-1</a> 
     <div class="tooltip">(1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div> 
    </td> 
</tr> 
<tr> 
    <td>       
     <a href="#" class="link">Link-2</a> 
     <div class="tooltip">(2) when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div> 
    </td> 
</tr> 
<tr> 
    <td>       
     <a href="#" class="link">Link-3</a> 
     <div class="tooltip">(3) It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</div> 
    </td> 
</tr> 
<tr> 
    <td>       
     <a href="#" class="link">Link-4</a> 
     <div class="tooltip">(4) publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
    </td> 
</tr> 
</table> 

CSS

table td { 
    position:relative; 
} 
.tooltip { 
    width:400px; 
    height:300px; 
    padding:20px; 
    border:1px solid #ccc; 
    box-shadow: 0 0 3px rgba(0,0,0,.3); 
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3); 
    border-radius:3px; 
    -webkit-border-radius:3px; 
    position:absolute; 
    top:5px; 
    left:50px; 
    display:none; 
} 

JQUERY

$(function(){ 
    $('.link').hover(
     function(){ 
      $(this).next().show(); 
     }, 
     function(){ 
      $(this).next().hide(); 
     } 
    ) 
}) 

的jsfiddle

http://jsfiddle.net/96j44/

Answer 1

一个简单的或简单的方法来做到这一点，没有一个jQuery插件，是通过添加一些简单的规则，你的CSS，然后没有Javascript或jQuery是必要的。虽然我不太了解你对table的需求，但如果你不使用CSS，CSS会更简单。

table td { 
 
    position: relative; 
 
} 
 

 
.tooltip { 
 
    width: 400px; 
 
    height: 300px; 
 
    padding: 20px; 
 
    border: 1px solid #ccc; 
 
    box-shadow: 0 0 3px rgba(0, 0, 0, .3); 
 
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3); 
 
    border-radius: 3px; 
 
    -webkit-border-radius: 3px; 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 50px; 
 
    display: none; 
 
} 
 

 
.tooltip { 
 
    z-index: 100; 
 
} 
 

 
.link { 
 
    display: block; 
 
    width: 9%; 
 
} 
 

 
.link:hover+.tooltip { 
 
    display: block; 
 
} 
 

 
.tooltip:hover { 
 
    display: block; 
 
}

<table width="600"> 
 
    <tr> 
 
    <td> 
 
     <a href="#" class="link">Link-1</a> 
 
     <div class="tooltip">(1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <a href="#" class="link">Link-2</a> 
 
     <div class="tooltip">(2) when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <a href="#" class="link">Link-3</a> 
 
     <div class="tooltip">(3) It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <a href="#" class="link">Link-4</a> 
 
     <div class="tooltip">(4) publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

明白了。由于您使用的是表格，因此td的值高于.tooltip的值，并且鼠标事件在时间之前被触发。

所以基本上你需要添加z-index:1;或更高，这取决于周围的环境以避免这个问题。

和你的jQuery会是这样的：

$(function() { 
    $('.link').on('mouseenter', 
     function() { 
      //if a tooltip is visible hide it so the right one can show up 
      if ($('.tooltip').is(':visible')) { 
       $('.tooltip').hide(); 
      } 
      $(this).next().show(); 
    }); 
    $('.tooltip').on('mouseout', 
     function() { 
      $(this).hide(); 
    }); 
}) 

这里的工作JSFIDDLE，突出了td的情况下，你要拿出的z-index，看看发生了什么事情。