如何使用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会更简单.

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>