CSSツールチップ

.tooltip：hover.contentsスタイル

最後に、.tooltip：hover.contentsというルールを定義しました。このルールは、ユーザーがクラス名tooltipの要素の上にマウスを置いたときにツールチップテキストを表示するために使用されます。 。

このルールが実行されると、.contents要素の可視性はvisibleに設定されます 。これは、ユーザーがツールチップにカーソルを合わせると、ツールチップがWebページに表示されることを意味します。

CSSツールチップを配置する

上記の例では、ユーザーがラベルにカーソルを合わせると、テキストの右側にツールチップが表示されます。prepare the baking tray 。ただし、これをカスタマイズして、ツールチップがテキストのさまざまな端に表示されるようにすることができます。

正しい位置

以前のコードでは、ツールチップがテキストの右側に配置されています。ただし、ツールチップを別の方法で表示するように既にスタイル設定していて、ツールチップを正しい位置に戻したい場合は、次のコードを使用できます。

.tooltip .contents {
	top: -5px;
	left: 105%;
}

このCSSルールを以前のコードと組み合わせると、ツールチップがテキストの右側に配置されます。上：-5pxルールは、ツールチップをそのコンテナ要素の中心に揃えます。左：105％ルールは、ツールチップの位置をツールチップの幅の105％だけ左にオフセットするため、ツールチップをコンテナの右側に配置します。

私たちのコードは次を返します：

ご覧のとおり、ツールチップはテキストの右側に表示されます。

左の位置

ツールチップをテキストの左側に表示したいとします。次のコードを使用してこれを実現できます：

.tooltip .contents {
	top: -5px;
	right: 105%;
}

このコードを以前のコードに追加すると、ツールチップがテキストの左側に配置されます。上：-5pxルールは、最後の例で説明したように、ツールチップをそのコンテナーの中心に揃えます。右：105％のルールを使用すると、ツールチップをコンテナの左側に配置できます（つまり、ツールチップの位置をツールチップの幅の105％だけ右にオフセットできます）。

コードが返すものは次のとおりです。

テキストの左側にツールチップが表示されます。

トップポジション

ツールチップをテキストの上に表示したいとします。このタスクは、次のコードを使用して実行できます。

.tooltip .contents {
	bottom: 100%;
	left: 50%;
	margin-left: -60px;
}

私たちのコードは次を返します：

この例では、3つのCSSスタイルを使用して、ツールチップをテキストの上に配置しました。下：100％、左：50％のスタイルでは、ツールチップをツールチップラベルの幅の100％オフセットできます（prepare the baking tray ）ツールチップラベルの下部と左側からそれぞれ。

マージン左スタイルを使用すると、ツールチップを中央に配置できます。ツールチップの幅が120pxであるため、左マージンの値を-60px（120pxの半分）に指定しました。これにより、ツールチップがツールチップラベルの中央に表示されます。

一番下の位置

ツールチップをPrepare the baking trayの下に表示するとします。 。ラベル。このコードを使用してこれを行うことができます：

.tooltip .contents {
	top: 100%;
	left: 50%;
	margin-left: -60px;
}

私たちのコードは次を返します：

私たちのコードは、Top Positionと同じスタイルを使用しています 1つの例外を除いた例。この例では、top：100％スタイルを使用します（最後の例で使用したようにbottom：100％ではありません）。このスタイルでは、ツールチップボックスをツールチップラベルの幅の100％オフセットすることができます（prepare the baking tray 。）、ツールチップボックスをラベルの下に配置できるようにします。

ツールチップのフェードイン

ツールチップをデザインするときに、ユーザーがツールチップにカーソルを合わせたときにツールチップのテキストをフェードインするように決定する場合があります。これにより、ツールチップがユーザーの画面に表示されるように設定されている場合に、より見た目に美しいトランジションを作成できます。

フェードインツールチップを作成するために使用できるスタイルは次のとおりです。

.tooltip .contents {
	opacity: 0;
	transition: opacity 2s;
}

.tooltip:hover .contents {
	opacity: 1;
}

このスタイルを最初の例のコードと組み合わせると、フェードイン効果を実現できます。これがどのように機能するかを分析してみましょう。まず、ツールチップの不透明度を0に指定します。これは、ツールチップが非表示になっていることを意味します。

次に、不透明度と2秒の2つの値で遷移プロパティを指定します。 opacity トランジションで適用するCSSプロパティを参照し、2s 移行の期間（秒単位）を指します。

次に、.tooltip：hover .contentsルールを作成します。このルールは、ユーザーがツールチップにカーソルを合わせたときにツールチップの不透明度を1に設定します。

これにより、ユーザーがツールチップにカーソルを合わせると、要素が完全に不透明（非表示）から完全に表示に移行するという効果を実現できます。移行期間を2秒に指定したため、この移行が完了するまでに2秒かかります。

CSSトランジションについて詳しく知りたい場合は、CSSトランジションプロパティのガイドをお読みください。

結論

ツールチップは、Webページに追加情報を表示するために使用されます。 HTMLとCSSの助けを借りて、Webページに追加情報を表示できるようにする見た目に美しいツールチップ要素を設計できます。

このチュートリアルでは、例を参照して、CSSでツールチップを作成する方法、およびツールチップをラベルの左、右、下、および上に配置する方法について説明しました。また、ユーザーがツールチップラベルにカーソルを合わせたときにトリガーされるフェードイン効果を作成する方法についても説明しました。

これで、プロのWebデザイナーのように独自のCSSツールチップの設計を開始するために必要な知識が得られました。