これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles

Post on:2024年3月6日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。

このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザインが、ここを見ればコピペで簡単に実装できます。

HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles

CSS Tooltips & Speech Bubblesを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回は100種類のツールチップとスピーチバブルです。

CSS Generators: Tooltips & Speech Bubbles

まずは、ツールチップの実装方法から。
各ツールチップをホバーし「Copy the CSS」をクリックすると、CSSがコピーできます。

各ツールチップをクリック

HTMLはすべて共通で、div要素一つです。

<div class="tooltip">Your text content</div>

1	<div class="tooltip">Your text content</div>

あとは、さきほどのCSSをペーストするだけ。
※コピーしたCSSにはコメントでHTMLも含まれていました。

/* HTML: <div class="tooltip">This is the same as #5 but with another shape for the tail </div> */
.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip { 
  --b: 3em; /* tail dimension */

  --p: 50%;  /* main position (0%:left 100%:right) */
  --r: 1.2em; /* the radius */

  padding: 1em;
  border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/4) min(var(--r),var(--p) - var(--b)/4)/var(--r);
  background: #cc333f; /* the main color */
  position: relative;
}
.tooltip:before {
  content: "";
  position: absolute;
  top: 100%;
  left: clamp(var(--b)/-2,var(--p) - 3*var(--b)/4,100% - var(--b));
  width: var(--b);
  aspect-ratio: 1;
  background: inherit;
  --g:#000 calc(100% - 1px),#0000;
  -webkit-mask: 
    radial-gradient(circle closest-side at 12% 88%,var(--g)),
    radial-gradient(20% 20% at 52% 55%,var(--g)),
    radial-gradient(25% 25% at 75% 0,var(--g));
}