私たちはしばらくの間、私たちのWebサイトに簡単なツールチップをコーディングしています。単に "title"属性を使用するだけで同じことが実現できることに気付きました。タイトルアトリビュートをツールチップとして使用してはならない理由は何ですか?この機能をサポートしていないブラウザはありますか? (w3schoolsは、すべての主要ブラウザがこれをサポートしているようです。)タイトルの属性がツールチップとして表示されることはありますか?
答えて
すべての主要ブラウザはtitle
をサポートしています。しかし、あなたはこの種のカスタムツールチップを表示する能力を持っていません。http://www.dreamcss.com/2009/03/list-of-25-javascriptajax-css-tooltip.html
あなたがSO(このサイト)のカードをホバリングしたのを見ましたか?彼らはタイトルを使用している場合、そのような素晴らしいツールチップを表示することは不可能かもしれません。
これは標準ですが、かなり安全です。
は、すべての主要なブラウザが実際にツールチップをサポートしているので、彼らのためにtitle属性を使用すること自由に感じていますhttp://www.w3.org/TR/html4/struct/global.html#h-7.4.3
あなたがリンクした記事から - "ビジュアルブラウザでは、タイトルが「ツールヒント」として表示されることがよくあります。それは普遍的には聞こえません... – froadie
を参照してください。私はあなたがアクセシビリティ(主に低視力および盲目のユーザ)とフォールトトレランスのためにタイトルを鏡映するためのalt属性も提供していることに注意してください(画像が読み込まれない、またはユーザが画像をブロックするユーザ遅い接続からのエージェント)。
現実的に遅いです(Chromeで1秒または2時間)。現代のインターネットユーザーは、それが待っている間に多くの忍耐を持っているかどうか疑問です。
jQueryの「mouseenter」イベントと「mouseleave」イベントを使用して、サードパーティ製のプラグインを使用するか、自分でハードコードすることができます。以下のようにダミーコード: HTML:
<button id="button-awesome">Awesome</button>
<div class="tooltip" style="display:none">
This is a button
</div>
のJavaScript/jQueryの:
$('#button-awesome').on('mouseenter', function() {
show Tooltip // toggle, or slideToggle, or .css("display","block") or .removeClass('hidden')
}).on('mouseleave', function() {
// undo what you've just done.
});
それはモバイルブラウザに来るときは注意してください。主にそこではサポートされていません。
- 1. タイトル属性から表示されるツールチップを変更する
- 2. title属性にツールチップが表示されるイベントはありますか?
- 3. ngTableのツールチップ(タイトル属性)にデータ値が表示されません
- 4. 入力フィールドの値属性が、表示されるテキストと異なることはありますか?
- 5. ツールチップのタイトル属性が、私はこのコードを追加すると
- 6. HTMLタイトル属性を動的に設定してブラウザに表示させることはできますか?
- 7. タイトル属性がツールチップを表示しないようにするにはどうすればよいですか?
- 8. Firefoxにタイトル属性が表示されません
- 9. ホバー上のタイトル属性ツールチップを隠す
- 10. Htmlの表示属性がブロックされて表示される
- 11. 修正が必要... AMPの 'col'タグに 'width'属性が表示されないことがあります。HTML
- 12. タイトル属性をjsなしで使用するツールチップですか?
- 13. ナビゲーションバーが表示されますが、ボタンとタイトルは表示されません
- 14. プロパティデコレータに「オブジェクトに属性がありません」と表示されるのはなぜですか?
- 15. タイトル(anglejs)にJSONの属性を表示
- 16. ブートストラップのツールチップのタイトルにMVCが表示されない
- 17. Vimでは、カーソルがあるところにツールチップを表示できますか?
- 18. Jquery Hoverタイトルの属性と表示部を取得
- 19. HTMLタイトルは平文として表示され、タイトルには表示されません。
- 20. CSS:リストスクロールの親から遠いところにツールチップが表示されます
- 21. テキストボックスをクリックするとツールチップが表示されます
- 22. TableViewにオブジェクトの属性を設定したときに表示されるコンテンツがありません
- 23. 属性エラーが表示されるのはなぜですか?
- 24. ネイティブのapp要素が無効になっていることを示す属性はありますか?
- 25. iAdsはアプリで白いボックスとして表示されることがありますか?
- 26. JQueryタイトル属性ツールヒント - ブラウザのツールチップを削除する
- 27. IE 11のタイトル属性を使用するツールチップ
- 28. ビジュアル2010 WPFデザイナー:スタイルが表示されることがありますか?
- 29. タイトル属性にHTML.Rawを使用すると、MVC 4 Razorエスケープ文字アンパサンドが表示される理由
- 30. ASP.NET MVC(3)では、ビュージェネレータにプロパティが表示されないようにする属性がありますか?
ヒントありがとうございました:)私たちには、必要なときにもっと洗練されたツールチップがあります。非常にシンプルなツールチップには何かが必要でしたが、コーディングする代わりにtitle属性を使用することができました。 – froadie
@Froadie:単純なヒント(主に1行)ではカスタムツールヒントを使用する必要はありません。あなたはそれのためのタイトルを使用することができます。 –