•  03-07-2019
  •  | 
  •  

Domanda

Esiste un modo per sopprimere i titoli pop-up sui collegamenti, ma tenerli ancora sulla pagina per i non vedenti?

È stato utile?

Soluzione

Questa è una funzione del browser per interpretare il titolo del collegamento e visualizzare una descrizione comandi / popup. Non c'è modo di sopprimerli. Ho provato (perché neanche a un cliente piacevano loro) e non c'è modo di aggirarli.

Altri suggerimenti

So che questo è stato risolto ma ho anche trovato questa soluzione alternativa: Nascondi tooltip nativo usando jQuery

Ho avuto questo problema con un progetto in cui il client voleva visualizzare la propria descrizione comandi (che è stata eseguita con i CSS), ma stava anche mostrando a causa della descrizione comandi avviata dal browser, quindi ha mostrato due volte. Abbiamo risolto il problema rimuovendo l'attributo 'title' e usando invece 'data' per popolare il testo nel CSS.

Non sono sicuro di cosa significhi tenerli nella pagina per i non vedenti, poiché sono visibili solo nel codice sorgente?

Ad esempio:

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

mostrerebbe il link "Titolo del link qui" sulla pagina e il fastidioso popup quando ci si passa sopra.

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

mostrerebbe il collegamento "Titolo del link qui" ma NON mostrerebbe il fastidioso popup sul passaggio del mouse, anche se puoi ancora usare il tag data per fare riferimento a tutto ciò che vuoi mettere lì (nel nostro caso, inseriamo il testo per la descrizione a cui il CSS fa riferimento).

Ovviamente se rimuovi completamente il tag del titolo il problema è risolto, ma hai detto che dovevi tenerlo lì, quindi questa è la mia soluzione alternativa come usato prima.

Funziona in jQuery. 

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

... forse non sarebbe l'ideale, ma potresti sempre provare, al posto di un title attributo nel <a href>, un <span> tra i <a> tag: 

/* 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>

Tuttavia, non lo consiglio come soluzione particolarmente pratica. E sono abbastanza certo che non sarebbe valido. Se conoscessi JS, suggerirei qualcosa di più praticabile, ma anche allora non sono convinto che funzionerebbe.

I collegamenti nel mio browser non mostrano suggerimenti come quelli a meno che non abbiano un title attributo.

Se vuoi, puoi usare Greasemonkey per eseguire questo un po 'di javascript nella pagina evey per rimuoverli. 

var anchorTags;
anchorTags = document.getElementsByTagName("a");
for(var i = 0; i < anchorTags.length; i++) {
  anchorTags[i].removeAttribute("title");
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top