ここに投稿するのは初めてですが、このサイトは何年にもわたってかけがえのないリポジトリであることがわかりました。
最近、ウェブサイトのフォームにツールチップを追加しています。当初、私の懸念は、マウス ユーザーがツールチップ アイコン (私の場合は単に '(?)') にカーソルを合わせたときにこれらを機能させることでした。次のCSSを使用していました。
.tooltip
{
border-bottom: 1px dotted #000000;
color: #000000;
outline: none;
cursor: help;
text-decoration: none;
position: relative;
}
.tooltip span
{
margin-left: -999em;
position: absolute;
}
.tooltip:hover span, .tooltip:focus span
{
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000000;
font-family: Arial, Helvetica, sans-serif !important;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
background-color: #b4e0e0;
font-size: 1em;
}
.ttipcontent
{
padding: 0.8em 1em;
}
次の HTML を使用します。
<a class="tooltip" href="#">(?)<span class="ttipcontent">This is the tooltip content which will be displayed</span></a>
これは、マウス/ポインター デバイスで使用するためのオンホバー ツールチップを作成するという、意図した用途には十分に機能しました。ただし、これをタッチスクリーン デバイスで使用するのは悪夢でした。(?) アイコンをクリックするたびに、もちろんページのトップに移動しました。
そこで、HTML を次のように置き換えました (同じ CSS を維持します)。
<span class="tooltip">(?)<span class="ttipcontent">This is the tooltip content which will be displayed</span></span>
これは、マウス/ポインター デバイスとタッチスクリーン デバイスの両方でうまく機能するようになりました。ただし、ユーザーがリンクを「タブ」で移動してツールチップにキーボードで移動する機能をうっかり削除してしまいました。これはアクセシビリティの問題を引き起こします。
私の質問は、機能の 3 つの要素すべてを組み合わせる方法があるかどうかです。ホバー時、タッチ時、およびキーボード ナビゲーションによってツールチップを表示する機能はありますか?
助けてくれてありがとう！