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会更简单。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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并看看发生了什么。

如何使用jquery创建一个简单的mouseon弹出工具提示？

2 个答案: