Question

一直使用简单的CSS工具提示。

工作示例的CSS：

.tip
{
    position:relative;
}
.tip span.tooltip
{
    display:none;
    background:#ff5112;
    border:1px solid #9C0;
}
.tip:hover span.tooltip
{
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center
}

HTML：

<span class="tip">
<table><tr>
<td>Working Tip</td><span class="tooltip">Tip</span>  
</tr></table>
</span>

不工作的例子： HTML：

<table><tr>
<span class="tip"><td>Not working TIP</td><span class="tooltip">Tip</span></span>
</tr></table>

和Live example

Answer 1

你的问题是表格元素 - 你不能有一个包裹＆lt; td＆gt;的跨度。摆脱桌子，一切都会奏效。

Answer 2

我没有看到你的工具提示css类，尝试添加一个

Answer 3

不允许

跨越表格，尝试修复

Answer 4

我想也许我看到了你的问题，但由于省略了这个问题，我会小心翼翼。第二个例子是格式错误的，如果你真的想要某种程度的东西它应该更像：

<span class="tip">
    <table>
        <tr>
            <td>Working Tip</td>
        </tr>
    </table>
    <span class="tooltip">Tip</span>  
</span>

如果要打开整个表格，“tip”应该在table标签之后。

Answer 5

<span class="tooltip">需要进入<td class="tip">才能让您当前的CSS按预期工作...

<table><tr> 
  <td class="tip">
    Working Tip
    <span class="tooltip">Tip</span>
  </td>
</tr></table>

Answer 6

对我有用的解决方案：

<table><tr><td>
<a href="blah.php" class="tip">
Blah Blah Text
<span class="tooltip">Blah Blah Tip</span>
</a>
</td></tr></table>

但是关闭css后这看起来很糟糕，所以要走的路是使用title属性然后在顶部添加mootools或者这样的lib。

谢谢你们。

CSS仅工具提示问题

6 个答案: