このメソッドはJSを使用せず、CSS3およびHTML5のみを使用するコンテンツです。
免責事項
実際には、コンテンツの擬似要素プロパティのcss attr（）がCSS2に登場しました。このようにして、一般的に、新しいものはありません。
簡単な方法
この方法は、小さな「ツールチップ」が必要な場所で機能します-ツールチップ。
最初に、コードを示します。
<span class="tooltip" data-tooltip="I'm small tooltip. Don't kill me!">Hover me!</span>
.tooltip { border-bottom: 1px dotted #0077AA; cursor: help; } .tooltip::after { background: rgba(0, 0, 0, 0.8); border-radius: 8px 8px 8px 0px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); color: #FFF; content: attr(data-tooltip); /* , */ margin-top: -24px; opacity: 0; /* ... */ padding: 3px 7px; position: absolute; visibility: hidden; /* ... . */ transition: all 0.4s ease-in-out; /* */ } .tooltip:hover::after { opacity: 1; /* */ visibility: visible; }
要素（この場合はspan）を取得し、表示されるテキストを含む属性を追加し、疑似要素の後に::を取得します。 この疑似要素のコンテンツでは、 attr（）の注目すべきプロパティを使用して、ツールチップにテキストを割り当て、ホバーに表示します。
残りのプロパティは、コードのコメントから明らかだと思います。
それとは別に、ChromeとOperaでのアニメーションの動作に注意したいです（おそらくIEでは、不在のため、チェックする方法がありません）。
彼女は違います。 これは、WebKitとOperaが擬似要素:: beforeおよび:: afterに遷移とアニメーションを適用しないという事実によるものです。
このため、WebKit バグトラッカーにバグが登録されています。
より複雑なツールチップの方法
ツールチップには、テキストだけでなく、前の方法に挿入できないフォーマットや画像も含まれている必要があります。
さらに、この方法でできることの例のみを検討します。
そして再びコード：
<a class="htooltip" href="http://habrahabr.ru/">qutIM <span>qutIM — . . <img src="logo.png" /> </span> </a>
.htooltip span { /* */ background-color: rgba(0,0,0, 0.8); border-radius: 15px 15px 15px 0px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); color: #fff; margin-left: 2px; margin-top: -75px; opacity: 0; /* */ padding: 10px 10px 10px 40px; position: absolute; text-decoration: none; visibility: hidden; /* */ width: 350px; z-index: 10; } .htooltip:hover span { /* hover */ opacity: 1; visibility: visible; } .htooltip span img { /* */ border: 0 none; float: left; margin: -71px 0 0 -234px; opacity: 0; position: absolute; visibility: hidden; z-index: -1; } .htooltip:hover span img { /* */ opacity: 1; visibility: visible; }
すべてがシンプルです。 これらの例はこのページで見ることができます。
PS一部の人は尋ねます：HTML5はどこですか？ この記事では、HTML5仕様の一部であるdata- *属性に言及しています。