Question

我正在尝试在网页上创建工具提示。我希望用户能够翻转链接，当他们这样做时，显示任意html。在这种情况下，它是一个简单的表，包含一些元数据。我尝试过使用jquery.tools，但我不确定如何正确使用它。这是一个想法：

<a id="foo">FOO</a>
<div id="tooltip-content">
    I am visible when the user hovers over FOO
    <table>
       <tr>
         <td>Name</td>
         <td>Foo</td>
       </tr>
       <tr>
         <td>Value</td>
         <td>Waka waka</td>
       </tr>
       ....
    </table>
</div>

当用户将鼠标悬停在链接文本FOO上时，我希望div及其内容变得可见，浮动在鼠标附近，我不在乎它的上方，下方，左侧或右侧的链接文本。它只需要工作。最简单/最好的方法是什么？我不认为我可以使用链接的title属性，因为我想支持一个html表，这是正确的吗？我该怎么做？

Answer 1

基本的东西，真的。这是一个小提琴：http://jsfiddle.net/MqcMM/。表和链接包装在容器中的原因是允许在显示它时将鼠标悬停在表上。

HTML：

<div id = "container">
    <a id="foo" href = "#">FOO</a>
    <table>
        <tr>
            <td>Name</td>
            <td>Foo</td>
        </tr>
        <tr>
            <td>Value</td>
            <td>Waka waka</td>
        </tr>
    </table>
</div>

CSS：

body {
    padding: 50px;
}

#container {
    position: relative;
    display: table;
}

#container > table {
    position: absolute;
    white-space: nowrap;
    border-collapse: collapse;
    display: none;
}

#container > table td {
    border: 1px dotted #000;
    padding: 2px;
}

#container:hover > table {
    display: table;
}

从任意HTML表创建工具提示输出

1 个答案: