Jak wyłączyć etykietkę w przeglądarce za pomocą jQuery?

Question

Czy można wyłączyć wyświetlanie podpowiedzi przeglądarki po wyświetleniu wskaźnika myszy nad elementami z atrybutem "tytuł"? Pamiętaj, że nie chcę usuwać zawartości tytułu. Oto kod proszone są o:

$(document).ready(function() { 
    $('a.clickableSticky').cluetip({ 
     splitTitle: '|', 
     showTitle: false, 
     titleAttribute: 'description', 
     activation: 'click', 
     sticky: true, 
     arrows: true, 
     closePosition: 'title' 
    }); 
}); 

w ASP.NET

<ItemTemplate> 
    <a class="clickableSticky" href="#" 
    title=' <%#((Limit)Container.DataItem).Tip %>'> 
    <img src="..\App_Themes\default\images\icons\information.png"/> 
    </a> 

</ItemTemplate> 

Answer 1

Można użyć jQuery aby usunąć zawartość tytułowego attribte lub przenieść je do innego parametru do późniejszego wykorzystania .

Nie oznacza to jednak, że straciłeś dostęp.

RE: ClueTip Wyszukiwanie Google wydaje się sugerować, że jest to powszechny problem - czy dzieje się tak tylko w IE? ClueTip wydaje się działać zgodnie z oczekiwaniami w FireFox.

Answer 2

Możesz usunąć atrybut title podczas ładowania strony.

$(document).ready(function() { 
    $('[title]').removeAttr('title'); 
}); 

Jeśli trzeba użyć tytuł później, można przechowywać go w elementu jQuery data().

$(document).ready(function() { 
    $('[title]').each(function() { 
     $this = $(this); 
     $.data(this, 'title', $this.attr('title')); 
     $this.removeAttr('title'); 
    }); 
}); 

Inną opcją jest, aby zmienić nazwę atrybutu title do aTitle, czy coś innego, że przeglądarka będzie ignorować, a następnie zaktualizować dowolną JavaScript do zapoznania się z nową nazwę atrybutu zamiast title.

Aktualizacja:

Ciekawym pomysłem można użyć jest „leniwie” usunąć tytuł, gdy unosi się nad elementem. Gdy użytkownik unieruchomi element, możesz z powrotem przywrócić jego wartość.

To nie jest tak proste, jak być powinno, ponieważ IE nie usuwa poprawnie podpowiedzi w zdarzeniu aktywowania, jeśli ustawisz atrybut tytułu na null lub usuniesz atrybut title. Jeśli jednak ustawisz etykietkę narzędziową na pusty ciąg ("") po najechaniu kursorem, usunie to etykietkę ze wszystkich przeglądarek, w tym Internet Explorera.

Możesz użyć metody wspomnianej powyżej do przechowywania atrybutu tytułu w metodzie jQuery's data(...), a następnie umieścić go ponownie na mouseout.

$(document).ready(function() { 
    $('[title]').mouseover(function() { 
     $this = $(this); 
     $this.data('title', $this.attr('title')); 
     // Using null here wouldn't work in IE, but empty string will work just fine. 
     $this.attr('title', ''); 
    }).mouseout(function() { 
     $this = $(this); 
     $this.attr('title', $this.data('title')); 
    }); 
}); 

Answer 3

Zahacz o ClueTip, aby użyć atrybutu tytułu o zmienionej nazwie.

Answer 4

Oto nowoczesny jQuery sposób, żeby to zrobić (IMO) ...

$('[title]').attr('title', function(i, title) { 
    $(this).data('title', title).removeAttr('title'); 
}); 

... i oczywiście, czytając title przypisują powrotem odbywa się z ...

$('#whatever').data('title'); 

Answer 5

Po sugestii Dan Herberta powyżej, oto kod:

$(element).hover(
    function() { 
     $(this).data('title', $(this).attr('title')); 
     $(this).removeAttr('title'); 
    }, 
    function() { 
     $(this).attr('title', $(this).data('title')); 
    }); 

Answer 6

function hideTips(event) { 
    var saveAlt = $(this).attr('alt'); 
    var saveTitle = $(this).attr('title'); 
    if (event.type == 'mouseenter') { 
     $(this).attr('title',''); 
     $(this).attr('alt',''); 
    } else { 
     if (event.type == 'mouseleave'){ 
      $(this).attr('alt',saveAlt); 
      $(this).attr('title',saveTitle); 
     } 
    } 
} 

$(document).ready(function(){ 
$("a").live("hover", hideTips); 
}); 

Witam wszystkich. Korzystam z tego rozwiązania i działa dobrze we wszystkich przeglądarkach.

Answer 7

Jak muszę tę funkcjonalność będzie dostępna podczas innej akcji (jak ekranie kopiowania lub wybrać kolor) moje rozwiązanie zawiera dwie funkcje mają być nazywane po który rozpoczyna działanie i kiedy to się skończy:

$.removeTitles = function() { 
    $('[title]').bind('mousemove.hideTooltips', function() { 
    $this = $(this); 
    if($this.attr('title') && $this.attr('title') != '') { 
     $this.data('title', $this.attr('title')).attr('title', ''); 
    } 
    }).bind('mouseout.hideTooltips', function() { 
    $this = $(this); 
    $this.attr('title', $this.data('title')); 
    }); 
} 

$.restoreTitles = function() { 
    $('[title]').unbind('mousemove.hideTooltips').unbind('mouseout.hideTooltips'); 
    $('*[data-title!=undefined]').attr('title', $this.data('title')); 
} 

MouseEnter nie może być stosowane, ponieważ inny element (y) mógłby się nad elementem tytułem (jako obraz w zatytułowanego div) i niż mouseOut nastąpi tak szybko, jak unoszą się nad elementem wewnętrznym (obraz!)

jednak podczas korzystania mouseMove ty należy zwrócić uwagę, ponieważ zdarzenie jest uruchamiane wielokrotnie. Aby uniknąć wycierania zapisanych danych, sprawdź najpierw, czy tytuł nie jest pusty!

Ostatnia linia w RemoveTitles, próbuje przywrócić tytuł z elementu, z którego mysz nie wychodziła, wywołując koniec przy użyciu myszki lub klawisza skrótu.