jquery floating div on hover

Question

What I have?

1. A html-table which has a lot of rows.

2. A hidden (display=none) div which contains some input controls (lets call it "div-to-display"). Only one div-to-display in whole page.

What I'm trying to do?

When the mouse hovers on the first cell in each row - show the "div-to-display" below it (like tool tip).

But , I can't create a separated div-to-display div for each table row. All cells must use the same "div-to-display" element.

While showing the div-to-display div, it should be float. What it means is that it won't change the location of the other cells in the table. It will be above them.

Do you have idea how to do this with jquery `javascript`?

Answer 1

DEMO: http://jsfiddle.net/sBtxq/

JQuery

// Add our div to every td
$('td').append('<div class="div-to-display">yay</div>');

CSS

.div-to-display {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid red;
    background-color: #eee;
    z-index: 10;
}
td {
    position: relative;
}
td:hover > .div-to-display {
    display: block
}

---

Updated (non-JS) version

CSS

td {
    position: relative;
}
td:after {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid red;
    background-color: #eee;
    z-index: 10;
    content: "yay";
}
td:hover:after {
    display: block
}

DEMO: http://jsfiddle.net/sBtxq/20/

Answer 2

use jquery offset() method to get position of hover of those elements and apply that as a left and top for the div. (Make sure to position the div as ABSOLUTE).

Answer 3

Style it on your own

#div-to-display{
position:absolute;
top:50px;
left:50px;
width:300px;
height:200px;
z-index:99999;
display:none;
}

add this class="toHover" to each or table rows whom on hover you want to show div

add this function

  window.onload = function(){

    $('.toHover').each(function() {

         $(this).mouseenter(function(){ $('#div-to-display').show(); });
         $(this).mouseleave(function() { $('#div-to-display').hide();});
    });

}

Answer 4

If you want a simple solution try using tooltip plugins. There will be loads available out there. One such is jquery UI tooltip plugin .

Answer 5

Html For ie

    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
            <td>
                test
            </td>
        </tr>
    </table>
    <div id="divInput" style="display:none;position:absolute;">
        <input type="type" name="name" value=" " />
    </div>

jQuery:

<script type="text/javascript">
    var s = 'ss';
    $('table tr').each(function () {
        var this_tr = $(this);
        this_tr.find('td:first').mouseenter(function () {
            var this_td = $(this);

            $('#divInput').css({ top: this_td.offset().top + this_td.height(), left: this_td.offset().left });
            $('#divInput').show();
        }).mouseout(function () {
            var this_td = $(this);
            $('#divInput').css({ top: this_td.offset().top + this_td.height(), left: this_td.offset().left });
            $('#divInput').hide();
        })
    })
</script>