Question

我正在开发一个last.fm小部件，其中一个必要条件是，对于显示某个标签（流派）的每个轨道，必须存在一个小按钮。这样，当单击按钮时会显示工具提示，显示有关某个艺术家，他们的专辑以及他们最受欢迎的曲目的更多信息。这都是通过Ajax请求完成的。

我的网页正在使用here。除了工具提示之外，我已经成功地完成了所有工作，当有人点击每个曲目旁边的小“i”按钮图标时，我希望显示该工具提示。

但有些问题出现了：

我需要使用Ajax从工具提示中获取last.fm中的数据，然后定位工具提示，使其根据按下的按钮自动切换。

我的代码显示每个曲目旁边的“i”图标就是这样（后面用CSS定位）：

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

Ajax功能根据选择的轨道数创建X按钮。但是，根据我一直在阅读的内容，只应在任何标签之外创建一个工具提示（当然在<body标签内），这应该以编程方式进行转换。这是正确的方法吗？

我也注意到似乎有大量的JQuery插件来处理工具提示，而且由于问题1，我甚至无法让一个人工作 - 我不知道如何定位它们，如果我将标签放在我的重复轨道<div>之外，它们会显示在我页面的随机位置，而甚至根本不显示如果我将它放在那些说标签。您认为哪个是处理/创建工具提示的最佳插件？我想要干净的东西，轻松处理自动定位。

感谢您的阅读，我希望有人能够帮助我。

Answer 1

这是一个基本的例子。它实际上非常简单，但显然不知道完整的用户场景会有问题需要你调整。

演示：http://jsfiddle.net/dj9xS/3/

问题：

不检测窗户的两侧，因此工具尖端可能位于窗外。
如果没有再点击“i”图像，就没有事件可以让工具提示消失。

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);    
    };       

});

我希望这对你有帮助。

JQuery工具提示疑问/问题

1 个答案: