Question

我想在具有以下限制的网页中使用工具提示：

工具提示应该使用简单的文本，而不仅仅是锚点。
我不想使用javascript，只有css。
我想让它至少在Firefox和Internet Explorer中运行。

有希望的候选人是Eric Meyer的solution，但它使用了锚点。 Loadaveragezero的solution使用span作为简单文本，但它在Internet Explorer中不起作用。

我正在寻找一个有效的代码示例或带有上述参数的解决方案的链接。

Answer 1

无法满足您的所有要求。 IE对:hover的尊重是有限的--Eric Meyer的解决方案适用于IE，因为它使用锚点。如果你想让它在任何元素上工作并在IE中工作，你必须使用JS。

Answer 2

正如其他人所说，你的要求是不切实际的。在可能禁用Javascript的环境中，我通常会使用title属性来获取简单的浏览器工具提示作为后备，然后通过Javascript读取标题属性（使用jQuery等框架，或者用于）来启用更好看的工具提示我的个人偏好Mootools）。

代码示例可能类似于（使用Mootools和Tips插件）：

<script type="text/javascript">
window.addEvent('domready', function() {
    // Enable the most basic default tooltips
    var tooltips = new Tips('.tips');
}
</script>

<p>This is some example text in <abbr class="tips" title="Hypertext Markup Language">HTML</abbr> with some <a href="#" class="tips" title="Tooltips are useful tools">tooltips</a> applied to some of it.</p>

Answer 3

我害怕，它不能在你的约束下工作。 Internet Explorer 6和之前的版本只检测悬停在锚点上，因此您需要删除它的工作要求：

只需要在IE7及更新版本中工作（在这种情况下，Loadaveragezero的解决方案将起作用）
可以使用锚点（在这种情况下，Eric的解决方案可以使用）
可以使用Javascript（在这种情况下有many ways可以在IE7之前悬停）

用于简单文本的CSS工具提示

3 个答案: