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>
          <dt class="lfm_art">
          <a href="http://www.last.fm/music/Red+Hot+Chili+Peppers/_/Californication" title="Clique para ouvir Californication no last.fm" target="_blank"></a>
          <img src="http://userserve-ak.last.fm/serve/34s/42739473.png" alt="Artwork de Californication"><img src="http://userserve-ak.last.fm/serve/34s/42739473.png" alt="Artwork de Californication"></dt>
        <dd class="lfm_song">2. Californication2. Californication</dd>
        <dd class="lfm_artist">Red Hot Chili PeppersRed Hot Chili Peppers</dd>
    <dd class="lfm_info"><img src="http://phpdev.dei.isep.ipp.pt/i101524/lastfm-widget/images/info.png"><div class="tooltip"></div></dd>
      </dl>


<dl id="ajaxReference">
          <dt class="lfm_art">
          <a href="http://www.last.fm/music/Red+Hot+Chili+Peppers/_/Californication" title="Clique para ouvir Californication no last.fm" target="_blank"></a>
          <img src="http://userserve-ak.last.fm/serve/34s/42739473.png" alt="Artwork de Californication"><img src="http://userserve-ak.last.fm/serve/34s/42739473.png" alt="Artwork de Californication"></dt>
        <dd class="lfm_song">2. Californication2. Californication</dd>
        <dd class="lfm_artist">Red Hot Chili PeppersRed Hot Chili Peppers</dd>
    <dd class="lfm_info"><img src="http://phpdev.dei.isep.ipp.pt/i101524/lastfm-widget/images/info.png"><div class="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); 
        return false;    
    };       


    // 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.