Suprimir Fazer a ligação Títulos

StackOverflow https://stackoverflow.com/questions/809795

  •  03-07-2019
  •  | 
  •  

Pergunta

Existe alguma maneira para suprimir os títulos pop-up em links, mas ainda mantê-los na página para os deficientes visuais?

Foi útil?

Solução

Isso é uma função do navegador para interpretar o título do link e exibir uma dica de ferramenta / popup. Não há nenhuma maneira de suprimi-los. Eu tentei (porque um cliente não gostava deles também) e não há nenhuma maneira em torno deles.

Outras dicas

Eu sei que isso foi resolvido, mas eu também encontrei esta solução alternativa: Esconder usando jQuery

Eu tive esse problema com um projeto onde o cliente queria para mostrar a sua própria dica (que foi feito com CSS), mas também estava mostrando por causa da dica iniciada pelo navegador também, por isso mostrou duas vezes. Temos em torno este removendo o atributo 'título' e em vez de usar 'data' para preencher o texto no CSS.

Eu não tenho certeza do que você quer dizer como mantê-los na página para os deficientes visuais, como eles são visíveis apenas no código fonte?

Por exemplo:

<a href="link" title="something">Link title here</a>

iria mostrar o link 'Link título aqui' na página, bem como o pop-up irritante quando você passa o mouse sobre ele.

<a href="link" data="something">Link title here</a>

iria mostrar o link 'Link título aqui', mas não iria mostrar o pop-up irritante em pairando, mas você ainda pode usar a tag data a referência que você quer colocar lá (no nosso caso, vamos colocar o texto para a dica de ferramenta para o CSS para se referir a).

Obviamente, se você remover a tag title completamente o problema foi resolvido, mas você disse que precisava mantê-lo lá, então esta é a minha solução como usado antes.

Isso funciona em jQuery. 

var val;
$('[YOUR_SELECTOR]').hover(function() {
    val = $(this).attr('title');
    $(this).removeAttr('title');
  },function() {
    $(this).attr('title',val);
})

... que possivelmente não seria ideal, mas você pode sempre tentar, no lugar de um atributo title na <a href>, um <span> dentro das marcas <a>: 

/* screen.css */

a   { }

a span.titleText {
    display: none;
    position: absolute;
    bottom: 1.2em;
    left: 0;
}

a:hover span.titleText,
a:active span.titleText,
a:focus span.titleText {
    display: block;
}

/* audio.css */

a span {
    display: inline; /* or whatever the relevant attribute would 
                        be in an audio stylesheet. */
}

<head>
    <link href="screen.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="audio.css" type="text/css" rel="stylesheet" media="screen-reader, audio" />
</head>

<a href="http://some.url.com">
    <span class="titleText">This is the title</span>This is the link
</a>

Eu não, no entanto, sugerem-lo como uma solução particularmente prático. E eu estou bastante certo de que não iria validar. Se eu soubesse JS eu sugiro algo mais viável, mas mesmo assim eu não estou convencido de que iria funcionar.

Links no meu navegador não mostrar dicas de ferramentas como essa a menos que tenham um atributo title.

Se você quiser, você pode usar Greasemonkey para executar este pouco de javascript em evey página para removê-los. 

var anchorTags;
anchorTags = document.getElementsByTagName("a");
for(var i = 0; i < anchorTags.length; i++) {
  anchorTags[i].removeAttribute("title");
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top