Jquery Tooltip Doubts/questions

I'm developing a last.fm widget, and one of the requisites is, for each track that is displayed of a certain tag (genre), a small button must be present. This is so that a tooltip

Solution 1:

Here is a basic example. It's actually really simple, but obviously without knowing the full user scenario there will be issues with it that will require you to tweak.

Demo: http://jsfiddle.net/dj9xS/3/

The problems:

1. Doesn't detect sides of window, so tool tip could potentially be outside of window.
2. There is no event to make tool tip disappear without clicking on "i" image again.

HTML:

<style>dl { width: 300px; margin: 0 auto; }
    .lfm_info { position: relative; width: 16px; }
    .tooltip { display: none; background: black; width: 120px; position: absolute; bottom: 20px; left: 50%; margin-left: -68px; color: #fff; padding: 10px; }

</style><dl><dtclass="lfm_art"><ahref="http://www.last.fm/music/Red+Hot+Chili+Peppers/_/Californication"title="Clique para ouvir Californication no last.fm"target="_blank"></a><imgsrc="http://userserve-ak.last.fm/serve/34s/42739473.png"alt="Artwork de Californication"><imgsrc="http://userserve-ak.last.fm/serve/34s/42739473.png"alt="Artwork de Californication"></dt><ddclass="lfm_song">2. Californication2. Californication</dd><ddclass="lfm_artist">Red Hot Chili PeppersRed Hot Chili Peppers</dd><ddclass="lfm_info"><imgsrc="http://phpdev.dei.isep.ipp.pt/i101524/lastfm-widget/images/info.png"><divclass="tooltip"></div></dd></dl><dlid="ajaxReference"><dtclass="lfm_art"><ahref="http://www.last.fm/music/Red+Hot+Chili+Peppers/_/Californication"title="Clique para ouvir Californication no last.fm"target="_blank"></a><imgsrc="http://userserve-ak.last.fm/serve/34s/42739473.png"alt="Artwork de Californication"><imgsrc="http://userserve-ak.last.fm/serve/34s/42739473.png"alt="Artwork de Californication"></dt><ddclass="lfm_song">2. Californication2. Californication</dd><ddclass="lfm_artist">Red Hot Chili PeppersRed Hot Chili Peppers</dd><ddclass="lfm_info"><imgsrc="http://phpdev.dei.isep.ipp.pt/i101524/lastfm-widget/images/info.png"><divclass="tooltip"></div></dd></dl>
​

jQuery:

$('.lfm_info').click(function(){
    var toolTip = $(this).children('.tooltip');

        // Get data using AJAX// Not sure how you are requesting data, maybe by unique ID? Need to put into each track dl to // reference. e.g. $(this).parent().attr('id');// If success populate into tooltip on $(this).children('.tooltip')// $(this).children('.tooltip').text(ajaxData);   

        toolTip.text('Hello World');

    // If fail  // return false;if(toolTip.is(':visible')){
        toolTip.fadeOut(500); 
        returnfalse;    
    };       


    // Check if any other tooltips are visible    if($('.tooltip').is(':visible')) {
        $('.tooltip').fadeOut(500, function(){        
            toolTip.fadeIn(500);        
        });  
    } else {
        toolTip.fadeIn(500);    
    };       

});​

I hope this is helpful for you though.