Как предотвратить отображение всплывающей подсказки по умолчанию в кросс-браузерной манере?

Question

Я слышал это трудно, но - возможно.Я просто хочу сделать это, потому что я использую следующий код jquery, чтобы избежать медленного и очень маленького показа подсказок по умолчанию (для атрибутов title и alt в тегах & img).

$(function() {
$('a').hover(function(e) {
       e.preventDefault();
     if(this.title > '')
       {
    this.t = this.title;
   // this.title = '';
    $(this).append("<span id='tooltip'>"+ this.t +"</span>");
    $("#tooltip")
      .css("top",(e.pageY - 20) + "px")
      .css("left",(e.pageX + 3) + "px")
      .fadeIn("fast");

       }
   },
  function () {
    $(this).find("span:last").remove();
   }
 );
});

Теперь, если я выпущу //this.title = '';в коде - это работает, но всплывающая подсказка запускается только один раз, и при следующем наведении нет воспроизведения.

Есть идеи, как это переопределить?Thx.

Answer 1

РЕДАКТИРОВАТЬ : пример jsFiddle

Мне нравится qTip , но если вы хотите бросить свой собственный код, я бы сделал это...

$(function(){
  // remove all titles and create tooltip span
  $('a[title]').each(function(){
    var s = $("<span class='tooltip'>"+ this.title +"</span>").hide();
    $(this).append(s).removeAttr("title");
  });

  // setup hover functions
  // tooltip spans are already present
  // we just need to position and show them or hide them
  $('a').hover(function(e){
    $(this).find("span.tooltip").css({
      top: (e.pageY - 20) + "px",
      left: (e.pageX + 3) + "px"
    }).fadeIn("fast");
  },
  function(){
    $(this).find("span.tooltip").fadeOut("fast");
  });
});

Answer 2

Не обращайте внимания на мой последний ответ, я только что закончил Moosehead.

$('a').hover(function(e) {
      e.preventDefault();
      var title = $(this).attr('title');

      // assign the original title to the "tt" attribute
      $(this).attr('tt', title);  

      $(this).removeAttr('title');
      $(this).append("<span id='tooltip'>" + title + "</span>");

      $("#tooltip").css("top", (e.pageY - 20) + "px").css("left", (e.pageX + 3) + "px").fadeIn("fast");
    }, function() {    

      // assign it back to what it was
      $(this).attr('title', $(this).attr('tt'));

      $(this).find("span:last").remove();
    }
};