Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Function for mouse near an element in jQuery

I want to track and show a tooltip when the mouse is near a table head element. It works with the mouseenter event, but I want show the tooltip before mouseenter, when it gets near. Also I want remove the tooltip after mouseout some distance from the table head.

This is my code.

$('thead').mouseenter(showtooltip);
$('thead').mouseout(removetooltip);

How can I do this with jQuery?

like image 408
Dinuka Thilanga Avatar asked Oct 27 '11 04:10

Dinuka Thilanga


People also ask

What is mouseover function in jQuery?

The mouseover() method is an inbuilt method in jQuery which works when mouse pointer moves over the selected elements. Syntax: $(selector).mouseover(function) Parameters: This method accepts single parameter function which is optional.

What is the difference between Mouseenter () and mouseover () event?

The mouseover event triggers when the mouse pointer enters the div element, and its child elements. The mouseenter event is only triggered when the mouse pointer enters the div element. The onmousemove event triggers every time the mouse pointer is moved over the div element.

How do you get element at mouse position?

Use document. elementFromPoint(x, y) method to get the element content on that position when mouse pointer moves over.


1 Answers

This works. The first parameter can be any jQuery object. The second parameter is the nearness to the object, in this case 20px.

Demo: http://jsfiddle.net/ThinkingStiff/Lpg8x/

Script:

$( 'body' ).mousemove( function( event ) {

    if( isNear( $( 'thead' ), 20, event ) ) {
        //show your tooltip here
    } else {
        //hide it here
    };

});           

function isNear( element, distance, event ) {

    var left = element.offset().left - distance,
        top = element.offset().top - distance,
        right = left + element.width() + 2*distance,
        bottom = top + element.height() + 2*distance,
        x = event.pageX,
        y = event.pageY;

    return ( x > left && x < right && y > top && y < bottom );

};
like image 200
ThinkingStiff Avatar answered Sep 28 '22 15:09

ThinkingStiff