javascript - una - pushstate jquery

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

Question

¿Hay alguna manera de deshabilitar la información sobre herramientas del navegador para que no se muestre al desplazarse sobre los elementos que tienen el atributo ''título'' rellenado? Tenga en cuenta que no quiero eliminar el contenido del título. Aquí 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

Aquí está la forma moderna de hacerlo con jQuery (IMO) ...

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

... y, por supuesto, leer el atributo de title se hace con ...

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

Answer 2

Como necesito que esta funcionalidad esté disponible durante otra acción (como copiar la pantalla o elegir un color), mi solución contiene dos funciones a las que llamar cuando esa acción comience y cuando termine:

$.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 se puede usar porque otros elementos podrían colocarse sobre el elemento titulado (como una imagen en un div titulado) y se producirá un mouseOut tan pronto como se desplace sobre el elemento interno (¡la imagen!)

Sin embargo, al usar mouseMove, debes 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 RemoveTitles, intenta restaurar el título del elemento desde el cual el mouse no se cerró al llamar al final con mouseClick o con una tecla de acceso directo.

Answer 3

Podría eliminar el atributo de title en la carga de la página.

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

Si necesita usar el título más adelante, puede almacenarlo en los data() jQuery del elemento data() .

$(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 del title a un aTitle , o alguna otra cosa que el navegador ignore, y luego actualizar cualquier JavaScript para leer el nuevo nombre del atributo en lugar del title .

Actualizar:

Una idea interesante que podría usar es quitar "perezosamente" el título cuando se desplaza sobre un elemento. Cuando el usuario se desplaza del elemento, puede volver a poner el valor del título.

Esto no es tan sencillo como debería ser, ya que 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 pasar el mouse, 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 de data(...) jQuery y luego volver a mouseout 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 4

Podría usar jQuery para eliminar el contenido del atributo del título, o moverlo a algún otro parámetro para su uso posterior.

Sin embargo, esto significa que pierdes algo de accesibilidad.

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

Answer 5

Siguiendo la sugerencia de Dan Herbert arriba, 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

ClueTip para usar un atributo de título renombrado.

Answer 7

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.