リンクタイトルを非表示

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

  •  03-07-2019
  •  | 
  •  

質問

リンクのポップアップタイトルを非表示にする方法はありますか？

役に立ちましたか？

解決

これは、リンクタイトルを解釈してツールチップ/ポップアップを表示するブラウザの機能です。それらを抑制する方法はありません。試してみました（クライアントもそれらを好まなかったため）。それらを回避する方法はありません。

他のヒント

これは解決されましたが、次善策も見つかりました： 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");
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top