Question

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

enter image description here

唯一不同的是，表格看起来像这样：

它应该描述多行中的内容，例如：

Molten Coin:
+17 Defenses
+11 Attacks

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

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

显示更多信息（onmouseover）

2 个答案: