CODEWITHSUNDEEP
javascriptjqueryhover
No1Lives4Ever
No1Lives4Ever

Reputation: 6883

jquery floating div on hover

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

Upvotes: 3

Views: 13287

Answers (5)

sangram parmar
sangram parmar

Reputation: 8726

Html For i.e.

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

Upvotes: 0

gvee
gvee

Reputation: 17161

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/

Upvotes: 10

Voonic
Voonic

Reputation: 4775

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

}

Upvotes: 0

Sanjeevi Rajagopalan
Sanjeevi Rajagopalan

Reputation: 232

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

Upvotes: 1

Ganesh Pandhere
Ganesh Pandhere

Reputation: 1652

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

Upvotes: 1

Related Questions