Full Code

Here is good example of using jquery. It shows how easy custom tooltip can be done. Look at demo to see how it works:

demo

Apple, Potate

Usualy tooltips can be done with title attribute of a tag. But standart hints are very boring. With followed code you can make your own stylish tooltip. You just need to add class to all links where you what to have this tooltips. And then add jquery-script to your page:

source code

<a class="jquery-title-hint" title="This is a fruit." href="#">Apple</a>,
<a class="jquery-title-hint" title="This is a vegetable." href="#">Potate</a>

<div id="message_container" style="position:absolute;background-color:#444;color:#ffa;border:1px dotted #aaa;padding:3px;"></div>

<script>
$(document).ready(function() {
    $('#message_container').css('opacity', '0.0');
    
    $('a.jquery-title-hint').mouseover(function() {
        $('#message_container').text(this.title);
        $('#message_container').clearQueue();
        $('#message_container').stop();
        $('#message_container').css('opacity', '0.0');
        $('#message_container').fadeTo('fast', 1.0);
        $('#message_container').css('top',$(this).offset().top - $('#message_container').outerHeight()).css('left',$(this).offset().left+$(this).outerWidth());
        this.title = "";
    });
    
    $('a.jquery-title-hint').mouseout(function() {
        $('#message_container').delay(300).fadeTo('slow', 0.0);
        this.title =  $('#message_container').text();
    });
});

</script>

Comments: 0