HTMLのアイコンに簡単なツールチップを表示するにはどうすればよいですか?
https://stackoverflow.com/questions/59221
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
Ruby on Rails アプリで ActiveScaffold を使用しています。テーブルのスペースを節約するために、テーブル内のデフォルトの「アクション」テキストを置き換えました。「編集」、「削除」、「表示」）をCSSを使用したアイコンで表示します。また、action_link.add を使用していくつかのカスタム アクション (「移動」と「コピー」) を追加しました。
明確にするために、 関連するアクションを示すツールチップをポップアップ表示したい (すなわち。"編集"、"コピー") アイコンの上にマウスを置くと。
単純な「alt」定義をタグに追加することでこれを行うことができると考えましたが、それは機能しないようです。
誰かが私を正しい方向に向けてくれませんか？
解決
の alt 属性は、画像が見つからない場合、またはテキストのみのブラウザーで画像の代替として使用されます。
IE が作成したとき、それは間違っていました。 alt ツールチップとして表示されます。決してそんなつもりではなかったのです。
これの正しい属性は次のとおりです title, もちろん、IE ではツールチップは表示されません。
したがって、IE と FireFox/Safari/Chrome/Opera の両方でツールチップを表示するには、両方の alt 属性と title 属性。
他のヒント
このスレッドにちょっとした点を追加します...altタグやtitleタグはありません。alt 属性は画像用ですが、ページ上の他のすべての要素には title 属性を含めることができます。これは、ブラウザ間の互換性にとって最良の選択です。
<span title="Click here to edit the foo">
Edit
</span>
「title」タグが必要です。これがもう必要かどうかはわかりませんが、通常は、すべてのブラウザーでツールチップが同じように表示されるように、alt タグと title タグの両方を追加します。
img タグの alt プロパティは一部のブラウザで機能しますが、すべてのブラウザでは機能しません (一部の Mozilla ベースのブラウザなど)。
」正しい方法" これを行うには、title プロパティを使用します。
HTML のツールチップは、 alt 画像タグのテキストですが、CSS を使用してこれを設定している場合は、おそらく background:url(...); 画像ではなくスタイル。
使用 alt 画像と title リンクにあります。
Prestaul 氏が指摘したように、alt タグは画像には機能し、リンクにはタイトルが機能する必要があります。ただし、これもブラウザに依存します...ほとんどのブラウザ すべき このメタデータをツールチップとして表示する機能を実装しますが、そうする必要はありません。
Joel Coehoom 氏が指摘したように、私のアイコンが実際には背景画像であることに気づき、背景の上に title 属性と alt 属性を付けた Transparent.gif 画像を作成しました。これで、ツールヒントが完成しました。
