Question

我是HTML新手，感谢您的帮助。

在我用HTML制作的给定表格中，我想在某些单元格上设置一些工具提示消息。

a）这可能吗？如果是这样 - 怎么样？

b）这是否意味着我必须使用Web服务器或java脚本？我的任务是在浏览器上显示HTML页面，但没有Web服务器，我无法安装Web服务器。所有显示的数据都在文件本身中，我希望保持简单。

谢谢

Answer 1

a。您只需在td元素中添加title属性即可。然后，当您将鼠标悬停在表格单元格上时，您将获得一个工具提示。

<td title='I am a tooltip'> My Text</td>

更多信息：http://www.w3schools.com/tags/att_global_title.asp

b。不，您不需要设置网络服务器

Answer 2

您可以使用title属性

<td title="Hey there">

Answer 3

只需添加标题属性：

<input type="button" title="click me"/>

Answer 4

在这里，我为你做了一个小提琴：）

http://fiddle.jshell.net/B2Cr9/

HTML：

<table>
    <tr>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
    </tr>
    <tr>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
    </tr>
</table>

CSS：

.has-tootltip {
    display:inline-block;
    position:relative;
    background-color:green;
}
.tooltip {
    display:none;
    position:absolute;
    left: 0;
    top: 100%;
    width: 300px;
    min-height:40px;
    z-index:10;
    background-color: yellow;
}
.has-tootltip:hover .tooltip {
    display: block;
}

Answer 5

如果你想使用jQuery，那么你可以尝试每个td：

$(function(){ // doc ready
   $('table').find('td').each(function(){
       $(this).attr('title', $(this).text());
   });
});

此代码循环显示表格中可用的所有标识，然后将其文本设置为标题，显示为工具提示。

Demo

注意：

此代码不需要任何Web服务器，但您必须首先引用jQuery库。

Answer 6

简单的css解决方案：

[HTML]

<table>
  <tr><td data-tooltip="I am cell 1">cell 1</td></tr>
  <tr><td data-tooltip="I am cell 2">cell 2</td></tr>
  <tr><td>no tooltip</td></tr>
</table>

[CSS]

[data-tooltip]:hover:after {
    content: attr(data-tooltip);
    border: 1px solid #ddd;
    background: #fff;
    position: absolute;
    padding: 3px;
    margin-top: 0.5em;
}

请参阅此jsbin

如何在HTML文件上显示工具提示？

6 个答案:

Demo

注意：