Cómo deshabilitar la información sobre herramientas en el navegador con jQuery?

Question

¿Hay alguna manera de desactivar la información sobre herramientas del navegador para que se muestre al pasar el ratón sobre elementos que tienen el atributo 'título' rellenado? Tenga en cuenta que no quiero eliminar el contenido del título. Aquí se Se solicita el código:

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

y en 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

Se puede usar jQuery para eliminar el contenido de la attribte título, o moverlo a algún otro parámetro para su uso posterior .

Esto significa que usted pierde algo de accesibilidad.

RE: ClueTip Una búsqueda de Google parece sugerir que este es un problema común, ¿esto solo ocurre en IE? ClueTip parece funcionar como se esperaba en Firefox.

Answer 2

Puede quitar el atributo title en la carga de la página.

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

Si necesita utilizar el título más adelante, se puede almacenar en jQuery data() del elemento.

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

Otra opción es cambiar el nombre del atributo title a aTitle, o alguna otra cosa que el navegador ignoraría, y luego actualizar ninguna JavaScript para leer el nuevo nombre de atributo en lugar de title.

Actualización:

Una idea interesante que podría utilizar es el de "pereza" quitar el título cuando se cierne sobre un elemento. Cuando el usuario se queda fuera del elemento, puede devolver el valor del título.

Esto no es tan sencillo como debería ser porque IE no elimina correctamente la información sobre herramientas en el evento de desplazamiento si establece el atributo de título en null o elimina el atributo de título. Sin embargo, si establece la información sobre herramientas en una cadena vacía ("") al desplazarse, eliminará la información sobre herramientas de todos los navegadores, incluido Internet Explorer.

Puede usar el método que mencioné anteriormente para almacenar el atributo de título en el método data(...) de jQuery y luego ponerlo nuevamente en 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

Hack up ClueTip para utilizar un atributo de título renombrado.

Answer 4

Aquí está la moderna manera jQuery para hacerlo (OMI) ...

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

... y, por supuesto, la lectura de la title atribuyen vuelta se hace con ...

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

Answer 5

Siguiendo la sugerencia de Dan Herbert anteriormente, aquí está el código:

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

Hola a todos. Estoy usando esta solución y funciona bien en todos los navegadores.

Answer 7

Como necesito que esta funcionalidad esté disponible durante otra acción (como la pantalla de copia o escoger color,) mi solución contiene dos funciones que se llamará cuando esa acción comienza y cuando termina:

$.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 no puede ser utilizado porque otros elementos pueden colocarse sobre el elemento titulado (como una imagen en un título div) y que mouseOut ocurrirá tan pronto como desplace el cursor sobre el elemento interno (la imagen!)

Sin embargo, al utilizar mouseMove usted debería prestar atención porque el evento se dispara varias veces. Para evitar borrar los datos guardados, primero verifique que el título no esté vacío.

La última línea en EliminarTítulos, intenta restaurar el título del elemento desde el que el mouse no salió al llamar al final en mouseClick o en una tecla de método abreviado.