html - quitar - ¿Es posible ocultar el título de un enlace con CSS?

ocultar texto css

Question

Tengo un elemento de anclaje con un atributo de título. Quiero ocultar la ventana emergente que aparece al pasar sobre ella en la ventana del navegador. En mi caso, no es posible hacer algo como esto,

$("a").attr("title", "");

Debido a jQuery Mobile, el título volverá a aparecer después de que ocurran ciertos eventos (básicamente cada vez que el elemento de anclaje se vuelve a dibujar). Así que espero ocultar el título a través de CSS.

Algo como:

a[title] {
    display : none;
}

No funciona, ya que oculta todo el elemento de anclaje. Quiero ocultar el título solamente. ¿Es esto posible? La ventana emergente no debería mostrarse.

Answer 1

De acuerdo con la sugerencia de @ boltClock, diré que no creo que una solución CSS sea apropiada aquí, ya que el navegador decide qué hacer con el atributo del título de un enlace, o cualquier otra cosa relacionada. CSS, que yo sepa, no puede manejar este problema.

Como se mencionó, el uso de jQuery para reemplazar el título con una cadena vacía no funcionará porque jQuery mobile los vuelve a escribir en algunos puntos. Sin embargo, esto funcionará independientemente de JQM, y no implica la eliminación total del atributo de título, que es importante para SEO.

Esto funciona:

$(''a["title"]'').on(''mouseenter'', function(e){
    e.preventDefault();
});

Cambié mi código inicial de $(''body'').on(''mouseenter'') a esto después de la prueba. Esto está confirmado para trabajar.

Answer 2

El uso de la siguiente propiedad CSS asegurará que el texto del atributo del título no aparezca al pasar el cursor:

pointer-events: none;

Tenga en cuenta que JS es una solución mejor, ya que esta propiedad CSS asegurará que el elemento nunca sea el objetivo de ningún evento del mouse.

Answer 3

Por CSS no es posible, ya que con CSS solo puede agregar contenidos a DOM (típicamente con :before :after y content: ''...''; no puede eliminarlo ni cambiar los atributos.

La única forma es crear un evento personalizado en vivo (es. "change-something" ):

$("a").on("change-something", function(event) { this.removeAttr("title"); });

y disparar a todos los cambios:

... $("a").trigger("change-something");

Más información y demostración aquí:

http://api.jquery.com/trigger/
http://api.jquery.com/removeAttr/

Answer 4

Puede envolver su texto interno en un lapso y asignarle un atributo de título vacío.

<a href="" title="Something" class=".some-tooltip-class"><span title="">Your text</span></a>

Answer 5

intenta cambiar tu código usando esto

$(document).ready(function() {
    $("a").removeAttr("title");
});

esto eliminará el atributo de título, por lo que la etiqueta de pista no aparecerá cuando se desplace el mouse sobre el enlace