2015-02-09 131 views
0

目標我有這個功能提示:遍歷PHP和使用jQuery

//Tooltips 
(function($) { 
    $.fn.tooltips = function(html) { 
     var $tooltip, 
      $html; 
     return this.each(function(data, html) { 
      $html = $(html).attr("data-tooltip", data); 
      var $tooltip = $('<div class="tooltip" data-tooltip="' + data + '">' + $html.attr('title') + '</div>').appendTo(".tip"); 
      $html.removeAttr("title").hover(function() { 
       $html = $(this); 
       $tooltip = $('div[data-tooltip=' + $html.data('tooltip') + ']'); 
       $tooltip.addClass("active"); 
      }, function() { 
       $html = $(this); 
       $tooltip = $('div[data-tooltip=' + $html.data('tooltip') + ']'); 
       setTimeout(function() { 
        $tooltip.removeClass("active"); 
       }, 100); 
      }); 
     }); 
    } 
})(jQuery); 

$(function() { 
    $("a.tip[title]").tooltips(); 
}); 

而且我有這個PHP循環:

echo '<span class="author-meta"><a class="author tip" id="'. $username .'" href="#" title="[Removed]">'. $username .'</a></span><br>'; 

目前,當你將鼠標懸停在一個名字,所有的標題標籤出現在所有名稱上。 有沒有一種簡單的方法來讓它懸停在一個名字上 - 只有這個名字有懸停事件?

該代碼是從一個免費的教程網站,我似乎無法找到了,但我不記得在評論部分提到的這個特殊問題,所以我很茫然!

+0

,我發現類似的代碼上:http://css-tricks.com/bubble-point-tooltips-with-css3-jquery/ – Ananth 2015-02-09 17:06:31

+0

這就是一個!雖然沒有幫助:( – potts 2015-02-09 17:27:47

回答

1

在你的代碼錯就錯在:

.appendTo(".tip") 

即附加工具提示所有帶class =「小費」的元素。您只應追加到當前元素。在第8行的代碼應該是:

var $tooltip = $('<div class="tooltip" data-tooltip="' + data + '">' + $html.attr('title') + '</div>').appendTo(this); 
+0

啊哈!太簡單了!謝謝! – potts 2015-02-09 17:40:07