Question

I’m trying find a tip how to add a help text by the cursor, when cursor is hovered on the object. There is a DIV element (200px x 200px) when mouse is on that DIV I need that help text apear near the cursor (e.g please select smth…) and folow the cursor in that div element. Maybe some knows is there a JS plugin or smth? Searched everywhere, but can’t find anything like this.

Answer 1

You can try this with JQuery UI library tooltip feature
Download and include the libraries in this order within your html head tag,

<link href="css/smoothness/jquery-ui-1.9.0.custom.css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script src="js/jquery-ui-1.9.0.custom.js"></script>

Jquery code for initializing the tooltip feature with cursor follower

<script language="javascript" type="text/javascript">
$(document).ready(function() {
        $(document).tooltip({
            track: true
        });
}); 
</script>

In your html body you can use a div tag like this with your Tooltip text inside the title attribute

<div id="divElement" class="tooltip" title="Your text here" style="width:200px; height:200px; border:#F00 1px solid">DIV TAG</div>