Ocultar información sobre herramientas nativa usando jQuery

Question

¿Hay alguna manera de ocultar la acción de información sobre herramientas nativa cuando un usuario pasa el mouse sobre una etiqueta de anclaje con un atributo de título? No quiero eliminarlo, simplemente no mostrar el desagradable cuadro amarillo que es la acción de información sobre herramientas predeterminada.

ACTUALIZACIÓN:

Después de leer un par de otros mensajes que no creo que pueda ocultar el atributo de título para la acción sobre herramientas nativa, pero estoy tratando de pensar fuera de la caja aquí. ¿Podría usar otro atributo en lugar del atributo de título dentro de la etiqueta de anclaje y aun así mantener una página válida?

Eliminar el valor de atributo de título no es una opción a menos que alguien pueda averiguar cómo volver a agregarlo para un evento onclick?

CÓDIGO DE TRABAJO POR DEBAJO

$('[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

Al parecer, el atributo de título no está comprendido en el controlador de eventos normales. De todos modos, mi respuesta original no funcionó, aunque seguiré jugando con ella para ver si puedo hacer que funcione. Si necesita conservar el atributo de título pero no desea el efecto emergente, como se indica en sus comentarios, guarde el atributo de título en los datos del elemento y utilícelo desde allí.

$('[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... 
}); 

Respuesta original:

dar a cada elemento que tiene un título específico de un vuelo estacionario sobre el controlador que impide la acción predeterminada.

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

Excepto después de probarlo no parece funcionar.

Answer 2

Puede retirarlo por:

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

Esto eliminará por sólo js-usuarios, por lo que es todavía accesible y localizable para los motores de búsqueda.

Answer 3

para sacarlo del título, me gustaría utilizar los datos() Método:

$(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')); 
    }); 
}); 

También podría hacer que el selector de cualquier elemento que tenga un atributo de título:

$('*[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); 
    } 
); 

¡Intenta que funcione como un perro!

Answer 5

Aquí hay otro spin-off que le puede resultar útil, en caso de que utilice un JS plugin de luz que todavía tiene el atributo "title" para el procesamiento de título en los toboganes de la mesa de luz:

$('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

Sé que esto es Post sobre Jquery pero me acabo de encontrar a este problema y está conectado en su mayoría con lighboxes así que aquí está Mootools fijar para iaian7 Mediabox avanzado sobre los enlaces de imagen si alguien lo necesita La solución funcionará en cualquiera de estos también 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

Utilicé una variación en el código de bEj ni c bEj, porque necesitaba preservar el contenido del título con el vuelo estacionario, pero aún así era necesario suprimir el comportamiento predeterminado.

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

Esto me permite hacer esto en mi hoja de estilo: /* 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; 
} 

Dándome información sobre herramientas con estilo, donde los necesite, sin la información sobre herramientas que aparece por defecto de forma simultánea.

Answer 8

El póster original solo quería deshabilitar la acción nativa de .tooltip(). Si ese es el caso, utilice la siguiente solución simple:

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

Ahora el [title] atributo está desactivado y la descripción sólo se activará cuando un elemento tiene un atributo [-información sobre herramientas de datos]. Al definir más 'artículos' puede crear un comportamiento diferente y estilos:

$(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

Sus obras como esta:

Renombrar para stitle en lugar de atributo título predeterminado y si es necesario llamaremos a partir de Jquery:

getAttribute ('stitle')

Funciona en todos.

Answer 10

Puede enganchar el evento 'mouseenter' y devolver falso que detendrá la información sobre herramientas nativa para que no se muestre.

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