CODEWITHSUNDEEP
javascriptjqueryhtmlcsstooltip
David Williams
David Williams

Reputation: 8654

Create a Tooltip Out from arbitrary HTML Table

I am trying to create a tooltip on a web page. I want the user to be able to roll over a link, and when they do, display arbitrary html. In this case, its a simple table, containing some meta data. I have tried using jquery.tools, but I am not sure how to use it correctly. Here is the idea:

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

When the user hovers over the link text FOO, I want the div and its content to become visible, floating near the mouse, I don't care if its above, below, left or right of the link text. It just needs to work. What is the simplest / best way to do this? I don't think I can use the title attribute of the link since I want to support an html table, is that correct? How do I do this?

Upvotes: 1

Views: 2443

Answers (1)

DRD
DRD

Reputation: 5813

Basic stuff, really. Here's a fiddle: http://jsfiddle.net/MqcMM/. The reason the table and the link are wrapped in a container is to allow hovering over the table once it is displayed.

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

Upvotes: 2

Related Questions