2011-09-19 8 views
5

私たちはしばらくの間、私たちのWebサイトに簡単なツールチップをコーディングしています。単に "title"属性を使用するだけで同じことが実現できることに気付きました。タイトルアトリビュートをツールチップとして使用してはならない理由は何ですか?この機能をサポートしていないブラウザはありますか? (w3schoolsは、すべての主要ブラウザがこれをサポートしているようです。)タイトルの属性がツールチップとして表示されることはありますか?

答えて

1

すべての主要ブラウザはtitleをサポートしています。しかし、あなたはこの種のカスタムツールチップを表示する能力を持っていません。http://www.dreamcss.com/2009/03/list-of-25-javascriptajax-css-tooltip.html

あなたがSO(このサイト)のカードをホバリングしたのを見ましたか?彼らはタイトルを使用している場合、そのような素晴らしいツールチップを表示することは不可能かもしれません。

+0

ヒントありがとうございました:)私たちには、必要なときにもっと洗練されたツールチップがあります。非常にシンプルなツールチップには何かが必要でしたが、コーディングする代わりにtitle属性を使用することができました。 – froadie

+0

@Froadie:単純なヒント(主に1行)ではカスタムツールヒントを使用する必要はありません。あなたはそれのためのタイトルを使用することができます。 –

2

これは標準ですが、かなり安全です。

は、すべての主要なブラウザが実際にツールチップをサポートしているので、彼らのためにtitle属性を使用すること自由に感じていますhttp://www.w3.org/TR/html4/struct/global.html#h-7.4.3

+0

あなたがリンクした記事から - "ビジュアルブラウザでは、タイトルが「ツールヒント」として表示されることがよくあります。それは普遍的には聞こえません... – froadie

0

を参照してください。私はあなたがアクセシビリティ(主に低視力および盲目のユーザ)とフォールトトレランスのためにタイトルを鏡映するためのalt属性も提供していることに注意してください(画像が読み込まれない、またはユーザが画像をブロックするユーザ遅い接続からのエージェント)。

0

現実的に遅いです(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. 
 
});

0

それはモバイルブラウザに来るときは注意してください。主にそこではサポートされていません。

関連する問題