HTML でツールチップを作成するにはどうすればよいですか? CSS Html のツールチップ ツールチップの作成方法

著者より: こんにちは。 ツールチップは、要素 (通常は画像) の上にマウスを移動すると表示される小さな説明テキストです。 今日は、さまざまな方法で HTML でツールチップを作成する方法を見ていきます。

標準ヒント

デフォルトでは、title 属性は説明テキストの表示を担当します。 さまざまな要素に使用できますが、通常は、表示内容を説明するための画像にのみ使用されます。

以前の記事の 1 つでは、画像サイズの操作方法を示すためにトラの画像を使用しました。 差し支えなければ、またこの画像使わせていただきます。 したがって、ヒントを表示するには、title 属性を追加し、その中に目的のテキストを記述するだけです。

< img src = "tiger.jpg" title = "これは虎です" >

1 つの単語または複数の文を含めることができます。 そして、これは次のようになります:

ヒントはホバリング直後ではなく、しばらくしてからスムーズに表示されます。 これはデフォルトの動作です。

このようなツールチップの主な問題は、スタイルを設定できないことです。 この問題を解決するにはどうすればよいでしょうか? 別の方法でヒントを与える必要があります。 では、いくつかご紹介します。

純粋なCSSメソッド

画像のヒントを美しく表示できる非常に興味深い方法です。 HTML マークアップは単純です。画像をブロック コンテナーで囲む必要があるだけです。ブロック コンテナーに識別子を割り当てて、後でスタイルで参照できるようにします。

< div id = "tiger" data - name = "Суматранский тигр" > < img src = "tiger.jpg" > < / div >

ここで唯一わかりにくいのは、data-name 属性です。 これは、それ自体では何もしないいわゆるデータ属性ですが、その値は CSS や JavaScript で使用できるため、場合によっては便利です。 次にこれを見ます。

そこで、まずコンテナのスタイルについて説明します。 相対的な位置決めが必要なのは、ページ全体ではなく、親ブロックを基準にして位置決めが行われるように、説明テキストを含むブロックを絶対的に配置するためです。

#tiger( 位置: 相対; 表示: インラインブロック; )

＃虎（

位置: 相対的;

表示: インライン - ブロック;

ブロックライン表示により、ブロック (および作成するツールチップを含むブロック) がウィンドウの幅全体に広がることがなくなります。 あとはヒント自体を作成するだけです。 CSS では、疑似要素を使用してこれを行うと非常に便利です。 このような：

#tiger:hover:after ( content: attr(データ名); 位置: 絶対; 左: 0; 下: 0; 背景: rgba(5,13,​​156,.55); カラー: #fff; テキスト配置: センター; フォントファミリー: 筆記体; フォントサイズ: 14px; パディング: 3px 0; 幅: 100%; )

#tiger:ホバー:後 (

内容: 属性 (データ - 名前);

位置: 絶対;

左: 0;

下: 0;

背景: rgba(5, 13, 156, . 55);

色: #fff;

テキストの配置: 中央;

フォントファミリー: 筆記体;

フォントサイズ: 14px;

パディング: 3px 0;

幅: 100%;

コードはたくさんありますが、複雑なことは何もありません。 #tiger:hover:after セレクターは次のことを意味します。画像のあるブロックの上にマウスを移動すると、after 疑似要素を作成する必要があります (ルールは中括弧内にリストされます)。 content: attr(data-name) プロパティは、ブロックのテキスト値を設定します。 画像ラッパーブロックの data-name 属性に記述されたものと同じになります。

このツールチップは画像上にマウスを移動すると表示されますが、標準のものとは異なり、これは突然行われ、マウスを移動した瞬間に表示自体がすぐに行われます。 この場合、擬似要素ではスムーズな遷移がサポートされていないため、スムーズな遷移を実装することはできません。

方法 2. 純粋な CSS と滑らかな外観

ただし、コードをかなり書き直すことで、やはり JavaScript を使用せずに、ツールチップの滑らかな外観を実現できます。

次に紹介する 2 つの効果を自分の目で確認するには、メモ帳または便利なコード エディターを開いて、私の後のすべてを繰り返すことをお勧めします。 確かに、このためにはスタイル ファイルを含める必要がありますが、スタイルは HTML のタグ内に記述することもできます。

したがって、この例のコードは少し異なります。これは、擬似要素を使用しないためです。 そのせいでスムーズな変化を加えることができませんでした。 今回のコードは次のようになります。

スマトラトラ

< div id = "tiger2" >

< img src = "tiger.jpg" >

< div class = "text" >スマトラトラ< / div >

< / div >

CSS コードには大きな変更は加えられていません。

#tiger2( 位置: 相対; 表示: インラインブロック; ) #tiger2 .text ( 遷移: すべて 0.6 秒; 不透明度: 0; 位置: 絶対; 左: 0; 下: 0; 背景: rgba(5,13,​​156,. 55); カラー: #fff; テキスト整列: センター; フォントファミリー: 筆記体; フォントサイズ: 14px; パディング: 3px 0; 幅: 100%; 変換:scale(0); ) #tiger2:hover .text (不透明度: 1;)

#タイガー2(

位置: 相対的;

表示: インライン - ブロック;

#tiger2.text (

トランジション: すべて 0.6 秒。

変換:スケール(0);

#tiger2:hover.text(

不透明度: 1;

content プロパティのみを削除します。これは、擬似要素でのみサポートされているためです。 スムーズな状態遷移を作成するtransitionプロパティを追加します。 不透明度: 0 を指定すると、ツールチップ ブロックが完全に透明になり、ページ上に表示されなくなります。

ブロック上にマウスを移動するときに、ツールチップを使用してブロックを通常の透明度に戻すだけで十分になりました。 準備ができて。 要素がスムーズに表示されることが確認できます。

css3 を使用すると、別の方法で要素を非表示にすることができます。 たとえば、変換を使用します。 完全な透明度を次のプロパティ:transform:scale(0) に置き換えると、ブロック サイズがゼロに縮小されるため、単純に画面上に表示されなくなります。 画像のあるブロックの上にマウスを移動すると、transform:scale(1) のように通常のサイズを返す必要があります。 この場合、外観効果はさらに美しく見えます。 これは自分の目で見ることができます。

ご覧のとおり、CSS ではツールチップが美しい効果とともにゆっくりと表示されることもあります。

他の方法

jQuery はさらに多くの可能性をもたらします。 このライブラリを使用すると、ヒントを表示するコードを自分で記述したり、これをすでに実装しているプラ​​グインを見つけたりすることができます。

たとえば、Bootstrap フレームワークには既製のコンポーネントが多数あり、その 1 つがツールチップです。 これらと同じヒントを作成して使用できるようにするコード例については、フレームワークのドキュメントを参照してください。 Bootstrap 全体を接続する必要はありません。通常は、ツールチップなどのコンポーネントのみを残し、それのみをダウンロードして接続できます。

全体として、今日は CSS でシャープで滑らかな外観を持つ美しいツールチップを作成する方法を説明しましたが、さらに、Bootstrap と jQuery も活用できます。 何でも選んで、面白くて美しいヒントをあなたのサイトに実装してください!

ヴラド・メルジェヴィチ

HTML には、Web ページ上の任意の要素に追加できるグローバルな title 属性がすでにあります。 この属性が存在すると、要素の上にマウスを置くと表示されるツールチップが追加されます。 テキストのフォント、ツールチップのサイズ、およびその外観は通常、オペレーティング システムに依存し、スタイルを使用して変更することはできません。 さらに、多くの開発者は、そのようなヒントがすぐに消えてしまうことに満足していません。 そのため、希望どおりにデザインされた独自のツールチップを作成する方法を探す必要があります。 もちろん、最も一般的な方法はこれですが、場合によっては CSS だけで十分に対応できる場合もあります。

例として写真を選択しましたが、写真の上にマウスカーソルを置くと写真の名前が表示されます。 content プロパティを使用してテキスト出力自体を行い、 attr() を介して何らかの属性からテキスト値を取得します。 残念ながら、 img と組み合わせた場合、コンテンツは期待どおりに機能しないため、写真が要素に挿入され、そこにツールチップ テキストを含む data-title 属性が追加されます。 title 属性を挿入して使用したい誘惑にかられますが、この場合は 2 つのツールチップが同時に表示されます。1 つは「ネイティブ」で、もう 1 つは私たちのものです。 したがって、HTML5 ではこれが許可されているため、独自の data-title 属性を使用します。 したがって、次のコードが得られます (例 1)。

例 1: HTML コード

HTML5 IE Cr Op Sa Fx

CSS のツールチップ

ツールチップのスタイルに移りましょう。 まず、それをまったく表示させる必要があります。 これを行うには、 ::after 疑似要素を使用し、それに content: attr(data-title) を追加します。

Photo::after ( content: attr(data-title); )

photo クラスの要素のコンテンツの後に、data-title 属性のテキストが表示されることがわかりました。これが必要なものです。 ただし、ツールチップはマウス カーソルを写真の上に置いたときにのみ表示されるようにする必要があるため、:hover 疑似クラスも追加します。

写真:hover::after ( content: attr(data-title); )

残っているのは、ツールチップの目的のスタイル、特に位置、背景色、テキスト、フレームなどを設定することだけです (例 2)。

例 2: ツールチップのスタイル

HTML5 CSS3 IE Cr Op Sa Fx

CSS のツールチップ .photo ( display: inline-block; /* Inline-block 要素 */position:relative; /* 相対位置指定 */ ) .photo:hover::after ( content: attr(data-title); / *テキストの表示 */position:Absolute; /* 絶対位置 */ left: 20%; top: 30%; /* ツールヒントの位置 */ z-index: 1; /* ツールヒントを他の要素の上に表示 */ background: rgba ( 255,255,230,0.9); /* 半透明の背景色 */ font-family: Arial, sans-serif; /* フォントファミリー */ font-size: 11px; /* ツールチップのテキストサイズ */ パディング: 5px 10px; /* 余白* / border: 1px Solid #333; /* 境界線オプション */ )

この例の結果を図に示します。 1.

米。 1. ツールチップの種類

ツールチップの位置はカーソルの位置に依存せず、画像上にカーソルを置くと同じ場所に表示されます。 ツールチップを写真の下部に表示して、写真の大部分を覆わないようにすることができます。 スタイルは少し変わります（例 3）。

例 3. 写真の下部にツールチップを表示する

HTML5 CSS3 IE Cr Op Sa Fx

CSS のツールチップ .photo ( display: inline-block; /* Inline-block 要素 */position:relative; /* 相対位置指定 */ ) .photo:hover::after ( content: attr(data-title); / *テキストの表示 */position:Absolute; /* 絶対位置 */ left: 0; right: 0;bottom: 5px; /* ツールヒントの位置 */ z-index: 1; /* ツールヒントを他の要素の上に表示 */ バックグラウンド: rgba(0,42,167,0.6); /* 半透明の背景色 */ color: #fff; /* 文字の色 */ text-align: center; /* 文字を中央に揃えます */ font-family: Arial , sans-serif ; /* フォントの種類 */ font-size: 11px; /* ツールチップのテキスト サイズ */ padding: 5px 10px; /* マージン */ border: 1px Solid #333; /* ボーダーのオプション */ )

この例の結果を図に示します。 2.

米。 2. ツールチップの種類

残念ながら、ツールチップをアニメーション化するために使用できるtransitionプロパティは、擬似要素では機能しません。 したがって、ツールチップが突然表示されても満足する必要があります。 また、IE8 以前のブラウザでは効果がありません。このバージョンは ::after をサポートしていません。 ただし、この疑似要素を :after に置き換えると、ほぼ機能するオプションを取得できます。

レイアウトの達人にとって、この記事で何か新しい発見があるとは思えません。 この投稿は、私と同じように、ユニバーサル ツールチップの作成とスタイル設定に問題を抱えていた初心者のレイアウト デザイナーを対象としています。

最近、小さなブログを作成していたときに、スタイリッシュでありながらシンプルなツールチップを作成するという課題に直面しました。 ツールチップ用に個別の div コンテナを作成したり、純粋な CSS を使用してツールチップを作成したりするさまざまな方法を試した結果、コードが煩雑にならず、ブラウザー間で互換性があり、同時に実装が非常に簡単なユニバーサルなソリューションを見つけました。
この単純な問題を解決する私の方法に興味がある人は、猫の下で尋ねてください。

解決策 これからご紹介する方法は非常にシンプルで効果的です。 IE 6 を含むすべてのブラウザで動作します (私は何度もテストしました)。 変更も簡単で便利です。 コードが乱雑にならず、明確になります。 ニーズに合わせて簡単に変更できます。 たとえば、setTimeout などを使用してツールヒントの表示を遅らせます。HTML リンクのある HTML ページがあるとします。その上にマウスを移動すると、ツールヒントを表示する必要があります。
ツールチップのリンク
リストからすでにお気づきかもしれませんが、私は LESS css プリプロセッサを使用しています。
CSS スタイルとスクリプトを別のファイルに含めました。 また、リンクが 1 つと、ツールチップのコンテナーとなる div ブロックもあります。
HTML5 仕様では、要素またはブロックに関する情報を保存できるデータ属性タイプのカスタム属性の使用が許可されています。 ツールチップのテキストを保存するのはデータ属性です。
リンク
ストレージには data-tooltip 属性を使用します。
HTML は終了しました - スタイルに移りましょう CSS 私は LESS Elements ライブラリを使用しており、皆さんにもお勧めしているので、このフレームワークを使用していくつかのプロパティを作成します。
@import "css/elements.less"; #tooltip ( z-index: 9999; 位置: 絶対; 表示: なし; トップ:0px; 左:0px; 背景色: #000; パディング: 5px 10px 5px 10px; カラー: ホワイト; .opacity(0.5); .丸め(5px); )
リストから、最初の行で LE を接続し、div#tooltip ブロックを絶対位置に設定して非表示にしていることがわかります。 次に、ブロックに背景色とテキスト色を与え、角を丸く (5px)、透明度の値を 50% に設定します。
$.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "上" :eventObject.pageY + 5, "左" :eventObject.pageX + 5 )) .show(); )).mouseout(function () ( $("#tooltip) ").hide() .text("") .css(( "top" : 0, "left" : 0 )); )); ));// 準備完了。
ここで、data-tooltip 属性を持つすべての要素を選択範囲に追加し、目的の要素にマウスを置くと、ツールチップの値を取得して変数に保存します。 次に、#tooltip ブロックにヒント テキストを追加し、ページの端からのカーソル座標 + 5 ピクセルを指定して、最後に適切な場所にツールチップを含むブロックを表示します。 マウスが要素から離れた後、#tooltip ブロックを非表示にし、その内容をクリアして 0;0; に戻します。

それだけです！
その結果、次のようなものが得られます。

この単純なスクリプトのおかげで、data-tooltip 属性を持つページ上のすべての要素がツールヒントを受け取ります。

ご清聴ありがとうございました！

HTML ツールチップは、Web ページの特定の要素の上にマウスを置くと表示される追加情報を含むブロックです。 今日は、HTML と CSS を使用して独自のツールチップを作成します。

デモを見る | ソースコードをダウンロードする

リンク、タグ、スタイル付きテキストなど、ほとんどの要素に CSS ヒントを使用できるようになります。 要素にいくつかのクラスを適用し、ツールチップ テキストを含む data- 属性を追加する必要があります。

ドキュメントのセットアップ

HTML ドキュメントを作成し、ソース マークアップを設定する必要があります。

ツールチップのデモ // コンテンツ

Normalize.css へのリンクを追加しました。これは、すべてのブラウザーのスタイルをデフォルトにリセットし、すべての要素がすべてのブラウザーで同じように見えるようにするのに役立ちます。 標準の CSS リセットとは異なり、Normalize.css はすべてのデフォルト スタイルを削除しないため、すべての要素のスタイルを最初から書き直す必要はありません。

HTML ツールチップの基本的な例を配置するコンテナー クラスを含む div を作成しました。 body と .container クラスのスタイルは次のとおりです。

body ( font-family: "Work Sans"、sans-serif; font-size: 1.5em; line-height: 1.4em; font-weight: 700; background-color: #28ABE3; color: #fff; ) .container (幅: 800px; マージン: 100px 自動; 背景: 放射状グラデーション(400px 250px の円の一番遠い隅、#64BBE0 0%、#28ABE3、#28ABE3 95%); )

margin-left と margin-right を auto に設定して、コンテナーの div を中央に配置しました。 また、ボディセクションにスタイルを追加して、見栄えを良くしました。

背景に小さな軽い CSS グラデーションを追加することにしました。 ブラウザが CSS グラデーションをサポートしていない場合 (これは主に IE 8 および 9 に当てはまります)、背景色はデフォルトの青 (本文セクションの背景色) に戻ります。

ここではアンカー タグを使用して HTML ホバー ヒントを使用しますが、強力なタグや span などの他のインライン要素にクラスを割り当てることもできます。 以下はコンテナ div の内容です。

関連記事