JSFiddle - React, Tailwind, and code Playground
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>
JavaScript
$('.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);
};
});