Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery

Mouse Pointer With Text "tooltip"

Post a Comment
I'm using HTML/jquery/CSS and have a piece of text - 'test'. How can I make the 'test' text follow the mouse pointer (or replace the mouse pointer icon with the text if that is eas

Solution 1:

you can use the mousemove event to catch the position of the mouse, and then set to the text span.

The Html:

<html>
<body onmousemove="mousemove()">
<span id="textSpan" style="position:absolute">test</span>
</body>
</html>

the js:

function mousemove()
{
$('#textSpan').css({
    'top' : event.pageY,
    'left' : event.pageX
}); 
}

Solution 2:

See it in action at this JsFiddle

<div id="demo-mouse" class="box">
    <h3>Hover over this box to see mouse tracking in action</h3>
</div>

$(document).ready(function()
{
    $('#demo-mouse').qtip({
        content: 'I position myself at the current mouse position',
        position: {
            my: 'top left',
            target: 'mouse',
            viewport: $(window), // Keep it on-screen at all times if possible
            adjust: {
                x: 10,  y: 10
            }
        },
        hide: {
            fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
        },
        style: 'ui-tooltip-shadow'
    });
});

Post a Comment for "Mouse Pointer With Text "tooltip""