utiliza - que es javascript yahoo
Deshabilitar información sobre herramientas del navegador en enlaces y<abbr> s (8)
Quiero suprimir la información sobre herramientas por omisión del navegador web cuando un usuario pasa el mouse 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 los tiempos de fecha microformados. La BBC dejó de admitir hCalendar porque el aspecto de la fecha de lectura mecánica 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
EDITAR:
Arreglé un plugin 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();
Algo así en prototipo dejaría en blanco todos los atributos de título de los microformatos datetime con una clase de ''dtstart'':
$$(''abbr.dtstart'').each(function(abbr){abbr.title='' ''})
Tenga en cuenta que utilicé un espacio en blanco, la documentación de Mozilla para los estados element.title
De acuerdo con el error 264001 , establecer el título de la cadena vacía desencadena el comportamiento de herencia predeterminado. Para cancelar la herencia, el título debe establecerse en una cadena de espacio en blanco no vacía.
Esto no ayudará con su problema, pero podría ser interesante sin embargo: existe otro atributo universal aparte del title que se puede usar para almacenar datos: ¡ lang !
Simplemente convierta los datos que desea almacenar en una cadena continua y péguelo 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, incluso 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 definiciones 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;
}
Hasta donde sé, no es posible suprimir la etiqueta del título.
Sin embargo, hay algunas soluciones.
Suponiendo que quiera decir que quiere preservar 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;
}
}
}
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'');
});
Agregue este elemento a su html
onmouseover="title='''';"
Por ejemplo, tengo una casilla de verificación asp.net. Guardo una variable oculta pero no quiero que el usuario la vea como información sobre herramientas.
Encontré este hilo cuando uso el plugin jQuery timeago . En realidad, la solución es muy simple utilizando los pointer-events propiedad CSS. Publicar esto para el 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 en algo. En este caso, use la solución JS aceptada.
Puede enganchar el evento ''mouseenter'' y devolver falso, lo que detendrá la visualización de los tooltips nativos.
$(selector).on( ''mouseenter'', function(){
return false;
});
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>