CSSのみを使用したツールチップ

ツールヒントを使用して、非常に最小限で効率的な方法でユーザーに情報を渡すための素晴らしい方法です.これは、表示することが重要ですが、すべての時間を表示するために必要なページから内容を減らします.
しかし、それがウェブサイトにツールヒントを加えることになるとき、我々の開発者は一般的にそれがカスタマイズとコントロールの多くを与えるように、これは間違いなく良いです、このためのライブラリを使用します.しかし、ツールヒントが必要とされる状況ではなく、大規模な規模ではなく、ページ上のある場所では、このような大きなライブラリを持ち歩くのは役に立たない.

Required Knowledge:-

• General working knowledge of HTML and CSS
• How data attribute works in HTML and CSS. For reference check this CSS-tricks article
• Understanding of pseudo-selectors in CSS

ここでは、CSSだけを使用してツールチップを作成します.CSSでツールヒントを作成する方法はいくつかあります.これで、我々は使用されますpseudo-selectors CSSの.このメソッドを使用する利点の1つは、HTMLに実際の要素を作成する必要がないことです.
まず、ツールヒントを表示する要素のいずれかを追加しますdata 属性data-customTooltip="Tooltip text" . また、ツールヒントに表示するテキストを渡します.

index.html

<span data-customTooltip="Tooltip text">
  Hover on me to see tooltip
</span>

これはHTMLで必要なものです.さて、CSSを追加しましょう.ここでは、データ属性セレクタを使用してツールヒントをスタイリングします.Read here それについてもっと.

styles.css

[data-customTooltip]{
    cursor: pointer;
    position: relative;
}

[data-customTooltip]::after {
    background-color: #fff;
    color: #222;
    font-size:14px;
    padding: 8px 12px;
    height: fit-content;
    width: fit-content;
    border-radius: 6px;
    position: absolute;
    text-align: center;
    bottom: 0px;
    left: 50%;
    content: attr(data-customTooltip);
    transform: translate(-50%, 110%) scale(0);
    transform-origin: top;
    transition: 0.14s;
    box-shadow: 0 4px 14px 0 rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.05);
  }

ここでは、我々は持っている要素を選択しているdata-customTooltip それらの属性と擬似要素を作成する:after . 今までは、ツールチップの擬似要素が作成されますが、それは表示されませんscale(0) スタイルで.
次に、親要素上のホバーでスケールを1に変更します.

style.css

  [data-customTooltip]:hover:after {
    display: block;
    transform: translate(-50%, 110%) scale(1);
  }

そして、ここに私たちのツールチップです.
位置に応じて変更することができますtop , left , bottom , and right 値を翻訳プロパティと一緒に.
私は別のブログを我々はツールヒントの動的な位置を作り、また、光と暗いテーマを組み込むことを書きます.

今すぐパスdata-customTooltip="tooltip text" 任意の場所にツールヒントを追加します.

Codepen demo

PS : -これは私の最初のブログは、私が作っているか、または改善の任意の範囲がある任意のミスがある場合は、コメントを自由に感じてください.😀