0

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

在此处输入图像描述

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

>>表<<

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

Molten Coin:
+17 Defenses
+11 Attacks
4

2 回答 2

0

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

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>
于 2013-04-15T09:19:16.050 回答
0

您应该能够只使用 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;
}
于 2013-04-15T08:23:48.523 回答