Home/ Questions/Q 8704217
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T03:02:58+00:00

I’m developing a last.fm widget, and one of the requisites is, for each track

  • 0

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 appears when the button is clicked, showing more information about a certain artist, their albums, and their most popular track. This is all done with Ajax requests.

My page is live here. I have managed to get everything working except the tooltip, which I’d like to get showing when someone clicks the little ‘i’ button icon next to each track.

Some questions arise, though:

  1. I will need to fetch the data from last.fm with Ajax for the tooltip and then position the tooltip so that it shifts automatically according to the button that’s pressed.

My code that shows the ‘i’ icon next to each track is just this (positioned relatively with CSS after):

<dd class="lfm_info"><img src="images/info.png" /></dd>

The Ajax function creates X buttons depending on how many tracks have been selected. However, from what I’ve been reading, only one tooltip should be created, outside any tags (but inside the <body tag, of course) and this should be shifted programmatically. Is this the correct approach?

I’ve also noticed that there seems to be a huge amount of JQuery plugins to handle tooltips, and I’ve not managed to get even one to work because of issue 1) – I don’t know how to position them, so they show up in random places of my page if I place the tags outside my repeating track <div>‘s, and don’t even show up at all if I place it inside those said tags. Which do you think is the best plugin to handle/create tooltips? I’d like something clean, and that handles automatic positioning easily.

Thank you for reading, and I hope someone may be able to assist me.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0