CSS ツールチップ
CSSでツールチップを作成します。
デモ:ツールチップの例
ツールチップは、ユーザーが要素の上にマウスポインターを移動したときに何かに関する追加情報を指定するためによく使用されます。
基本ツールチップ
ユーザーが要素の上にマウスを移動したときに表示されるツールチップを作成します。
例
例の説明
HTML:コンテナー要素(<div>など)を使用して、"tooltip"それにクラス。ユーザーがこの<div>の上にマウスを置くと、ツールチップテキストが表示されます。
ツールチップテキストは、インライン要素(<span>など)内に配置されます。class="tooltiptext".
CSS:のtooltipクラス利用position:relative、ツールチップテキストを配置するために必要です(position:absolute）。ノート：ツールチップの配置方法については、以下の例を参照してください。
tooltiptextクラスは、実際のツールチップテキストを保持します。デフォルトでは非表示で、ホバーすると表示されます(以下を参照)。また、いくつかの基本的なスタイルを追加しました:幅120ピクセル、背景色を黒、テキストの色を白、テキストを中央揃え、上下に5ピクセルのパディング。
CSSborder-radiusプロパティは、ツールチップテキストに丸みを帯びた角を追加するために使用されます。
の:hoverセレクターは、ユーザーがマウスを<div>の上に移動したときにツールチップテキストを表示するために使用されます。class="tooltip".
ツールチップの配置
この例では、ツールチップは右側に配置されています(left:105%）「ホバー可能な」テキスト（<div>）。また、top:-5pxコンテナ要素の真ん中に配置するために使用されます。番号を使用します5ツールチップテキストの上下に5ピクセルのパディングがあるためです。パディングを増やす場合は、topプロパティを使用して、中間に留まるようにします(これが必要な場合)。ツールチップを左側に配置する場合も同様です。
ツールチップを上または下に表示する場合は、以下の例を参照してください。を使用することに注意してくださいmargin-leftマイナス60ピクセルの値を持つプロパティ。これは、ツールチップをホバー可能なテキストの上/下の中央に配置するためです。ツールチップの幅の半分(120/2=60)に設定されます。
上部のツールチップ
結果：
下部のツールチップ
結果：
ツールチップの矢印
ツールチップの特定の側から表示される矢印を作成するには、疑似要素クラスを使用して、ツールチップの後に「空の」コンテンツを追加します::afterと一緒にcontent財産。矢印自体は、境界線を使用して作成されます。これにより、ツールチップが吹き出しのようになります。
この例は、ツールチップの下部に矢印を追加する方法を示しています:
下矢印
結果：
例の説明
ツールチップ内に矢印を配置します。top:100%ツールチップの下部に矢印を配置します。left:50%矢印を中央に配置します。
ノート：のborder-widthプロパティは、矢印のサイズを指定します。これを変更する場合は、margin-left値を同じにします。これにより、矢印が中央に保持されます。
のborder-colorコンテンツを矢印に変換するために使用されます。上の境界線を黒に設定し、残りを透明に設定します。すべての面が黒の場合は、黒い四角いボックスになります。
この例は、ツールチップの上部に矢印を追加する方法を示しています。今回は下の境界線の色を設定していることに注意してください。
上矢印
結果：
この例は、ツールチップの左側に矢印を追加する方法を示しています:
左矢印
結果：
この例は、ツールチップの右側に矢印を追加する方法を示しています:
右矢印
結果：
フェードインツールチップ(アニメーション)
ツールチップのテキストが表示されようとしているときにフェードインしたい場合は、CSSを使用できます。transitionプロパティと一緒にopacity指定された秒数 (この例では1秒)で、完全に非表示から100%表示されます。
例
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。