显示更多信息（鼠标悬停）答案

【问题标题】：showing more info (onmouseover)显示更多信息（鼠标悬停）
【发布时间】：2013-04-15 17:19:16
【问题描述】：

我不确定它是如何用英语调用的，但我希望用户在将鼠标悬停在我的表格中的某个元素上时看到更多信息，如下所示：

唯一的区别是表格看起来像这样：

并且它应该描述超过一行的内容，例如：

Molten Coin:
+17 Defenses
+11 Attacks

【问题讨论】：

developer.mozilla.org/en-US/docs/HTML/…
谢谢 :) 这很酷 :D 但是有没有办法制作服装工具提示？喜欢白色背景，更大的字母。
那么你必须用 JavaScript 来模拟这种行为。
或者如果你想对工具提示有更多的控制，你可以使用一个扩展，比如：jqueryui.com/tooltip
谢谢大家 :) 现在我会坚持经典的.. 因为我还在学习 jquery :D

标签： javascript html css

【解决方案1】：

您应该可以只使用 CSS 工具提示：

    body {
        background-color:black;
        color:white;
    }

    .tooltipDiv {
        position:relative;
    }

    .tooltipDiv span {
        display:none;
        position:absolute;
        top:25px;
        left:60px;
        background-color:white;
        font-size:1.2em;
        color:black;
        padding:5px;
    }

    .tooltipDiv:hover span {
        display:inline;
}

<div class="tooltipDiv">
    My Area Div
    <span>Molten Coin:<br />+17 Defenses<br />+11 Attacks</span>
</div>

查看 JSFiddle 以了解它的实际效果。

http://jsfiddle.net/ZMuvm/

但请注意，如果您在锚元素以外的任何内容上使用 :hover peudo 类，则会失去与 IE6 的兼容性。不要从 MSDN 网站上摘录这一段：

从 Windows Internet Explorer 7 开始，当浏览器处于符合标准的模式（严格！DOCTYPE），您可以应用 :hover 任何元素的伪类，不仅仅是链接。如果伪类是未专门应用于选择器中的元素，例如 a 标记，假设通用 (*) 选择器。不分青红皂白的使用 :hover 伪类会对页面性能产生负面影响。

可以在这里查看上下文： http://msdn.microsoft.com/en-gb/library/ie/cc848866(v=vs.85).aspx

解决这个问题的一种方法是在 DIV 中放置一个块锚元素。看看这个小提琴的例子：

http://jsfiddle.net/uBF8J/

<div class="tooltipDiv">
    <a>My Area Div
        <span>Molten Coin:<br />+17 Defenses<br />+11 Attacks</span>
    </a>
</div>


body {
    background-color:black;
    color:white;
}

.tooltipDiv a {
    position:relative;
    display:block;
}

.tooltipDiv a span {
    display:none;
    position:absolute;
    top:25px;
    left:60px;
    background-color:white;
    font-size:1.2em;
    color:black;
    padding:5px;
}

.tooltipDiv a:hover span {
    display:inline;
}

【讨论】：

【解决方案2】：

使用 jquery 工具提示它会正常工作看看下面的网址

http://jqueryui.com/tooltip/ 或者见下面代码

 <html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>

【讨论】：