質問
リンクのポップアップタイトルを非表示にする方法はありますか?
解決
これは、リンクタイトルを解釈してツールチップ/ポップアップを表示するブラウザの機能です。それらを抑制する方法はありません。試してみました(クライアントもそれらを好まなかったため)。それらを回避する方法はありません。
他のヒント
これは解決されましたが、次善策も見つかりました: jQueryを使用してネイティブツールチップを非表示にします
クライアントが独自のツールチップを表示したいプロジェクトでこの問題が発生しました(CSSで行われました)が、ブラウザーで開始されたツールチップのためにも表示されていたため、2回表示されました。これを回避するには、「title」属性を削除し、代わりに「data」を使用してCSSにテキストを入力します。
それらはソースコードでのみ表示されるため、視覚障害者のページに表示するという意味がわかりませんか?
例:
<a href="link" title="something">Link title here</a>
ページに「リンクタイトルをここに」リンクを表示するだけでなく、その上にカーソルを置くと、迷惑なポップアップが表示されます。
<a href="link" data="something">Link title here</a>
リンク「リンクタイトルをここに」表示しますが、ホバリング時に迷惑なポップアップは表示しませんが、data
タグを使用してそこに置きたいものを参照することができます(この場合は、 CSSが参照するツールチップ)。
タイトルタグを完全に削除すると問題は解決しますが、それをそこに保持する必要があると言ったので、これは以前に使用した私の回避策です。
これはjQueryで機能します。
var val;
$('[YOUR_SELECTOR]').hover(function() {
val = $(this).attr('title');
$(this).removeAttr('title');
},function() {
$(this).attr('title',val);
})
...それは理想的ではないかもしれませんが、title
内の<a href>
属性の代わりに、<span>
タグ内の<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>
ただし、特に実用的な解決策としてはお勧めしません。そして、私はそれが検証されないことをかなり確信しています。 JSを知っていたら、もっと実行可能なものを提案しますが、それでも動作するとは確信していません。
ブラウザのリンクには、title
属性がない限り、そのようなツールチップは表示されません。
必要に応じて、 Greasemonkey を使用してこれを実行できます。それらを削除するために、eveyページのJavaScriptを少し。
var anchorTags;
anchorTags = document.getElementsByTagName("a");
for(var i = 0; i < anchorTags.length; i++) {
anchorTags[i].removeAttribute("title");
}