Ukrywanie natywnej podpowiedzi przy użyciu jQuery

Question

Czy istnieje sposób na ukrycie natywnej akcji podpowiedzi, gdy użytkownik umieszcza nad znacznikiem zakotwiczenia atrybut title? Nie chcę go usuwać, po prostu nie wyświetlaj paskudnego żółtego pola, które jest domyślną czynnością podpowiedzi.

UPDATE:

Po przeczytaniu kilku innych stanowisk nie sądzę, mogę ukryć atrybut tytuł dla rodzimej działania podpowiedzi, ale staram się myśleć poza pole tutaj. Czy mogę użyć innego atrybutu zamiast atrybutu title wewnątrz znacznika zakotwiczenia i nadal zachować prawidłową stronę ???

Usunięcie wartości atrybutu title nie jest opcją, chyba że ktoś może dowiedzieć się, jak dodać ją ponownie do zdarzenia onclick?

KOD pracy poniżej

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

$('a').click(function() { 
    var $this = $(this); 
    var title = $this.data('title'); 
    ... do your other stuff... 
}); 

Answer 1

Widocznie atrybut tytuł niewchodzące w zakres normalnej obsługi zdarzeń. Tak czy inaczej, moja oryginalna odpowiedź nie zadziałała, chociaż nadal będę się z nią bawił, aby sprawdzić, czy mogę ją uruchomić. Jeśli chcesz zachować atrybut title, ale nie chcesz efektu popup, jak wskazano w komentarzach, przechowuj atrybut title w danych elementu i używaj go tam.

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

$('a').click(function() { 
    var $this = $(this); 
    var title = $this.data('title'); 
    ... do your other stuff... 
}); 

Original odpowiedź:

Daj każdy element, który ma tytuł specyficzny Najedź obsługi, który zapobiega domyślną akcję.

$('[title]').hover(
    function(e) { 
     e.preventDefault(); 
    }, 
    function() { } 
); 

Z wyjątkiem testów nie wydaje się działać.

Answer 2

można usunąć przez:

$("a").removeAttr("title"); 

Spowoduje to usunięcie go tylko JS-użytkowników, więc jest jeszcze accessable i findable dla wyszukiwarek.

Answer 3

Aby dostać się z tytułem, chciałbym użyć danych() metoda:

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

// to access it 
$(document).ready(function() { 
    $('A').click(function() { 
     alert($(this).data('title')); 
    }); 
}); 

Można również dokonać wyboru dla każdego elementu, który ma atrybut Title:

$('*[title]').each(... 

Answer 4

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

     $(this).attr('title', ''); 

      $(this).mousedown(
       function(){ 
        $(this).attr('title', tempTitle); 
       } 
      ); 
    } 
    , 
    function() { 
     $(this).attr('title', tempTitle); 
    } 
); 

Spróbuj, działa jak pies!

Answer 5

Oto kolejny spin-off, które mogą okazać się przydatne w przypadku korzystania z lightbox JS plugin, który nadal potrzebuje „Tytuł” ​​atrybut dla przetwórstwa tytułowym na slajdach Lightboxu:

$('a.lightbox-trigger').each(function() { // Process all lightbox trigger links 

    $(this).mouseover(function() { 
     if(!$(this).data('keep')) // 1st time = FALSE, so make the swap 
      $(this).attr('data-title', $(this).attr('title')).attr('title', ''); 
     $(this).data('keep', true); // Preserve value if hovered before clicked 
    }); 

    $(this).mousedown(function() { 
     $(this).attr('title', $(this).attr('data-title')).attr('data-title', ''); 
     $(this).data('keep', false); // Mark element as safe to swap again 
    }); 
}); 

Answer 6

wiem, że to pisać o Jquery, ale po prostu zabrakło w tej kwestii i jest najczęściej związane z lighboxes więc tutaj jest Mootools naprawić za iaian7 Mediabox zaawansowane linków graficznych jeśli ktoś potrzebuje Rozwiązaniem będzie działać na każdym z nich również http://line25.com/articles/rounding-up-the-top-10-mootools-lightbox-scripts

if ($$('.lbThumb').length > 0) { // lbThumb a class or what ever you are using 
    $$('.lbThumb').each(function (el) { // same here , your a class 

     var savedtitle = el.get('title'); 
     var getimage = el.getElement('img'); 
        // must use image click since Mediabox will kill our a element click 
     getimage.addEvent('click', function() { 
      el.set('title',savedtitle); 
     }); 
     // hide nasty a tooltip 
     el.addEvents({ 
     mouseenter: function() { 
      el.erase('title'); 
     }, 
     // bring it back 
     mouseleave: function() { 
      el.set('title',savedtitle); 

     } 
     }); 

    }); 
} 

Answer 7

Użyłem wariacji na temat kodu bEj ni c bEj, ponieważ musiałem zachować treść tytułu po najechaniu kursorem, ale nadal musiałem stłumić domyślne zachowanie.

// Suppress default tooltip behavior on hover 
var tempTitle = ""; 
$('abbr[title],dfn[title],span.info-tip[title],').hover(
function(e){ 
    e.preventDefault(); 
    tempTitle = $(this).attr('title'); 

    $(this).attr('title', ''); 
     // add attribute 'tipTitle' & populate on hover 
     $(this).hover(
      function(){ 
       $(this).attr('tipTitle', tempTitle); 
      } 
     ); 
    }, 
    // restore title on mouseout 
    function() { 
    $(this).attr('title', tempTitle); 
    } 
); 

To pozwala mi robić to w moim arkusza stylów: /* abbr & tooltip styles: first, the immediate descendants of the content area are set to highlight abbreviations on hover, but avoiding lists; as we don't want *all* abbreviations highlighted when you hover on a root list */

abbr, 
abbr[tipTitle], 
dfn, 
dfn[tipTitle], 
span.info-tip, 
span.info-tip[tipTitle] { 
border-bottom:none; /*remove border 1st, then let following rules add it back in*/ 
} 

p:hover abbr[tipTitle], 
li:hover abbr[tipTitle], 
dl>*:hover abbr[tipTitle], 
label:hover abbr[tipTitle], 
p:hover dfn[tipTitle], 
li:hover dfn[tipTitle], 
dl>*:hover dfn[tipTitle], 
label:hover dfn[tipTitle], 
p:hover span.info-tip[tipTitle], 
li:hover span.info-tip[tipTitle], 
dl>*:hover span.info-tip[tipTitle], 
label:hover span.info-tip[tipTitle] 
{ 
position: relative; 
text-decoration: none; 
border-bottom: 1px dotted #333; 
cursor: help; 
} 

p:hover abbr[tipTitle]:before, 
li:hover abbr[tipTitle]:before, 
dl>*:hover abbr[tipTitle]:before, 
label:hover abbr[tipTitle]:before, 
p:hover dfn[tipTitle]:before, 
li:hover dfn[tipTitle]:before, 
dl>*:hover dfn[tipTitle]:before, 
label:hover dfn[tipTitle]:before, 
p:hover span.info-tip[tipTitle]:before, 
li:hover span.info-tip[tipTitle]:before, 
dl>*:hover span.info-tip[tipTitle]:before, 
label:hover span.info-tip[tipTitle]:before { 
content: ""; 
position: absolute; 
border-top: 20px solid #803808; 
border-left: 30px solid transparent; 
border-right: 30px solid transparent; 
visibility: hidden; 
top: -18px; 
left: -26px; 
} 

p:hover abbr[tipTitle]:after, 
li:hover abbr[tipTitle]:after, 
dl>*:hover abbr[tipTitle]:after, 
label:hover abbr[tipTitle]:after, 
p:hover dfn[tipTitle]:after, 
li:hover dfn[tipTitle]:after, 
dl>*:hover dfn[tipTitle]:after, 
label:hover dfn[tipTitle]:after, 
p:hover span.info-tip[tipTitle]:after, 
li:hover span.info-tip[tipTitle]:after, 
dl>*:hover span.info-tip[tipTitle]:after, 
label:hover span.info-tip[tipTitle]:after { 
content: attr(tipTitle); 
position: absolute; 
color: white; 
top: -35px; 
left: -26px; 
background: #803808; 
padding: 5px 15px; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
white-space: nowrap; 
visibility: hidden; 
} 

p:hover abbr[tipTitle]:hover:before, 
li:hover abbr[tipTitle]:hover:before, 
dl>*:hover abbr[tipTitle]:hover:before, 
label:hover abbr[tipTitle]:hover:before, 
p:hover dfn[tipTitle]:hover:before, 
li:hover dfn[tipTitle]:hover:before, 
dl>*:hover dfn[tipTitle]:hover:before, 
label:hover dfn[tipTitle]:hover:before, 
p:hover span.info-tip[tipTitle]:hover:before, 
li:hover span.info-tip[tipTitle]:hover:before, 
dl>*:hover span.info-tip[tipTitle]:hover:before, 
label:hover span.info-tip[tipTitle]:hover:before, 
p:hover abbr[tipTitle]:hover:after, 
li:hover abbr[tipTitle]:hover:after, 
dl>*:hover abbr[tipTitle]:hover:after, 
label:hover abbr[tipTitle]:hover:after, 
p:hover dfn[tipTitle]:hover:after, 
li:hover dfn[tipTitle]:hover:after, 
dl>*:hover dfn[tipTitle]:hover:after, 
label:hover dfn[tipTitle]:hover:after, 
p:hover span.info-tip[tipTitle]:hover:after, 
li:hover span.info-tip[tipTitle]:hover:after, 
dl>*:hover span.info-tip[tipTitle]:hover:after, 
label:hover span.info-tip[tipTitle]:hover:after { 
visibility: visible; 
transition: visibility 0s linear .3s; 
-moz-transition: visibility 0s linear .3s; 
} 

daje mi ładny podpowiedzi gdzie muszę je bez domyślnej podpowiedzi pojawiające się jednocześnie.

Answer 8

Oryginalny plakat chciał tylko wyłączyć natywną akcję .tooltip(). Jeśli tak jest, należy użyć następującego proste rozwiązanie:

$(function() { 
    $(document).tooltip({ 
     items: "[data-tooltip]", 
     content: function() { 
      var element = $(this); 
      if (element.is("[data-tooltip]")) { 
       return element.attr('data-tooltip'); 
      } 
     } 
    }); 
}); 

Teraz [title] atrybut jest wyłączona, a etykietka wywoła tylko wtedy, gdy element ma [data-tooltip] atrybut. Definiując kolejne „pozycje” można tworzyć różne zachowania i style:

$(function() { 
    $(document).tooltip({ 
     items: "[data-tooltip],img[alt]", 
     content: function() { 
      var element = $(this); 
      if (element.is("[data-tooltip]")) { 
       return element.attr('data-tooltip'); 
      } 
      if (element.is("[alt]")) { 
       return element.attr('alt') + something_else; 
      } 
     } 
    }); 
}); 

http://jqueryui.com/tooltip/#custom-content & http://api.jqueryui.com/tooltip/#option-items

Answer 9

Jego działa tak:

Zmień nazwę, aby sTitle zamiast atrybutu domyślnego tytułu, a jeśli trzeba zadzwonić z Jquery:

getAttribute ('stitle')

Działa na wszystkich.

Answer 10

Możesz zawiesić zdarzenie "mouseenter" i zwrócić wartość false, co uniemożliwi wyświetlanie natywnych etykiet narzędzi.

$(selector).on('mouseenter', function(){ return false; });

Answer 11

var title; 
$('a[title]').hover(function() { 
    title = $(this).attr('title'); 
    $(this).attr('title',''); 
}, function() { 
    $(this).attr('title',title); 
});