Deshabilitar la información sobre herramientas del navegador en enlaces y < abbr > s

Question

Deseo suprimir la visualización de información sobre herramientas predeterminada del navegador web cuando un usuario se desplaza sobre ciertos enlaces y elementos. Sé que es posible pero no sé cómo. ¿Alguien puede ayudar?

La razón de esto es suprimir la información sobre herramientas para fechas y horas microformadas. La BBC dejó de admitir hCalendar porque la aparición de la fecha legible por máquina era un problema de accesibilidad para las personas con discapacidades cognitivas, así como para algunos usuarios de lectores de pantalla. http://www.bbc.co.uk/blogs/bbcinternet /2008/07/why_the_bbc_removed_microforma.html

EDIT:

Creé un complemento jquery en la misma línea que la sugerencia de Aron ...

// uFsuppress plugin v1.0 - toggle microformatted dates
(function($){
$.ufsuppress = function() {
    $(".dtstart,.dtend,.bday").hover(function(){
        $(this).attr("ufdata",$(this).attr("title"));
        $(this).removeAttr("title");
    },function(){
        $(this).attr("title",$(this).attr("ufdata"));
        $(this).removeAttr("ufdata");
    });
}
})(jQuery);

// Usage
$.ufsuppress();

Answer 1

Hasta donde yo sé, no es posible realmente suprimir mostrando la etiqueta del título.

Sin embargo, existen algunas soluciones.

Suponiendo que quiere conservar la propiedad del título en sus enlaces y elementos, puede usar Javascript para eliminar la propiedad del título en onmouseover () y configurarlo nuevamente en onmouseout () .

// Suppress tooltip display for links that have the classname 'suppress'
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    if (links[i].className == 'suppress') {
        links[i]._title = links[i].title;
        links[i].onmouseover = function() { 
            this.title = '';
        }
        links[i].onmouseout = function() { 
            this.title = this._title;
        }
    }
}

Answer 2

Agregue este elemento a su html

    onmouseover="title='';"

Por ejemplo, tengo una casilla de verificación asp.net. Almaceno una variable oculta pero no quiero que el usuario vea la información sobre herramientas.

Answer 3

Se ejecutó este hilo al usar el jQuery plugin timeago . En realidad, la solución es muy simple usando la propiedad CSS pointer-events . Publicar esto en beneficio de las personas que vienen aquí a través de un motor de búsqueda :)

.suppress {
    pointer-events:none;
}

Tenga en cuenta que no debe usar esto para cosas como enlaces que deberían hacer clic para acceder a algo. En este caso, utilice la solución JS aceptada.

Answer 4

Algo así en el prototipo dejaría en blanco todos los atributos de título de microformatos de fecha y hora con un clase de 'dtstart':

$('abbr.dtstart').each(function(abbr){abbr.title=' '})

Nota: utilicé un espacio en blanco, la documentación de Mozilla para element.title estados

  

Según error 264001 , configuración   título de la cadena vacía desencadena el   comportamiento heredado predeterminado. Cancelar   herencia, el título debe establecerse en   cadena de espacio en blanco no vacía.

Answer 5

Esto no ayudará con su problema, pero podría ser interesante: ¡hay otro atributo universal aparte del title que puede usarse para almacenar datos - lang !

Simplemente convierta los datos que desea almacenar en una cadena continua y agregue un prefijo con 'x-' para declarar el uso privado de acuerdo con RFC 1766.

---

En los comentarios, sanchothefat aclaró que quiere resolver los problemas de usabilidad con el patrón de diseño abbr en microformatos. Pero hay otros patrones que son semánticamente significativos (o, en mi opinión, aún más) que este patrón. Lo que haría:

<p>
 The party is at
  <dfn class="micro-date">10 o'clock on the 10th
   <var>20051010T10:10:10-010</var></dfn>.
</p>

juntos con estos estilos

dfn.micro-date {
    font-weight: inherit;
    font-style: inherit;
}
dfn.micro-date var {
    display: none;
}

En mi opinión, la forma semánticamente más correcta sería usar una lista de definición dl , que no está permitida dentro de los párrafos. Esto se puede solucionar con el siguiente patrón:

<p>
 The party is at <q cite="#micro-dates">10 o'clock on the 10th</q>.
</p>

<dl id="micro-dates">
 <dt>10 o'clock on the 10th</dt>
 <dd>20051010T10:10:10-010</dd>
</dl>

que requiere una hoja de estilo más sofisticada:

q[cite='#micro-dates']:before {
    content: '';
}
q[cite='#micro-dates']:after {
    content: '';
}
dl#micro-dates {
    display: none;
}

Answer 6

Esto es lo que hice.

$('.fancybox').hover(
    function(){
        $(this).attr('alt',$(this).attr('title'));
        $(this).attr('title','');
    },
    function(){
        $(this).attr('title',$(this).attr('alt'));
        $(this).removeAttr('alt');
    }
).click(function(){
    $(this).attr('title',$(this).attr('alt'));
    $(this).removeAttr('alt');
});

Answer 7

Puede conectar el evento 'mouseenter' y devolver false, lo que detendrá la visualización de información sobre herramientas nativas.

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

Answer 8

Es posible suprimir este comportamiento con jQuery

var tempTitle;
$('[title]').hover(
  function(e) {
    debugger;
    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);
  }
);

.progress3 {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
}
.progress3:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(data-tooltip);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
}
.progress3:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div title='abc' data-tooltip="This is some information for our tooltip." class="progress3">
  title='abc' will not be displayed
</div>

fiddle