【CodePen】ツールチップのアイデア10選

💡 実装のポイント
JSは一切使わず、[tooltip]属性と::before（矢印）・::after（content: attr(tooltip)でテキスト表示）だけで完結する構成。表示方向は[flow="up"]〜[flow="right"]の属性値で切り替え、無指定時は上向きがデフォルト。色は::beforeのborder-*-colorと::afterのbackground（どちらも#333）を変えるだけでOK。ホバー時の動きは@keyframes tooltips-vert／tooltips-horzで制御。

💡 実装のポイント
Bootstrap 3.3.5のtooltip／popoverプラグインをそのまま利用する構成。JS側で$("body").tooltip({selector: "[data-toggle='tooltip']"})と.popover()をチェーンして一括初期化しており、各要素にはdata-toggle・data-placement・data-original-title（popoverはdata-contentも）を付与するだけで動く。色は.tooltip.top/.bottom/.left/.right > .tooltip-arrowと.tooltip-innerを上書きして変更。Bootstrap本体とjQueryの読み込みが前提。

💡 実装のポイント
ベースの.hintクラスに加え、.hint--top〜.hint--leftの方向修飾クラスを組み合わせる設計。テキストは::afterのcontent: attr(data-hint)で表示し、位置はmarginのオフセット値で調整している。作者コメントに「Works best in Firefox」とある通り、擬似要素へのtransitionが当時のブラウザ間で挙動差があった名残りなので、モダン環境で使う際は表示崩れがないか確認しておきたい。

💡 実装のポイント
SCSSの&ネスト記法で書かれており、a[data-tooltip]にdata-position="top/right/bottom/left"属性を付けて向きを切り替える構成。::before（テキスト）と::after（矢印）は初期状態で少しずらした位置に配置され、:hover時にtransform: translateY(0)等へ戻ることでスライドインするような動きを演出している。SCSSコンパイルが前提の点に注意。

💡 実装のポイント
※このPenは直接のソース取得がブロックされたため、検索結果に表示された断片からの確認となります。詳細な実装を確認したい場合はPenを直接ご覧ください。断片から分かる範囲では、$color-codepen〜$color-facebookのSCSS変数と@mixin social-icon($color)を使い、アイコンごとの背景色をツールチップの背景色にもそのまま流用する仕組みになっている。.social-icon:hoverで.tooltipのopacityとtransformを変化させて表示する構成。

💡 実装のポイント
SCSSで書かれた.pagination__dotに&--active修飾子で選択中のドットを表現。ツールチップ本体は::before（content: attr(data-tooltip)でテキスト表示）と::after（三角の矢印）で構成され、:hover時にtop位置とopacityをtransitionさせて浮き上がるように見せている。ドット数を増減させたい場合はdata-tooltip属性ごと要素を複製すればよい。

💡 実装のポイント
a要素内に隠しておいたspan（ラベルテキスト）をtransform: scale(0)とopacity: 0で非表示にしておき、:hover・:focus時にscale(1)／opacity: 1へ変化させて表示する仕組み。矢印部分はspan::beforeの正方形をrotate(45deg)で回転させて三角に見せている。:focusにも対応しているためキーボード操作でもツールチップが表示される。

💡 実装のポイント
React（TypeScript）で構築されたツールバーコンポーネント。各ボタンにtoolbar__button-tipという子要素としてツールチップを持たせ、:hover・:focus-visibleで表示する構成。toolbar--vertical修飾クラスの有無でツールチップの表示方向（下向き／横向き）を自動的に切り替えている点が特徴。role="toolbar"や矢印キーでのフォーカス移動にも対応しており、アクセシビリティ面の作りが丁寧。

💡 実装のポイント
.tooltip:hover ~ .popup-textのような隣接兄弟セレクタを使い、ホバー時に.popup-bg・.popup-outline・.popup-textをまとめて表示する構成。吹き出しの輪郭を描くSVGパスにはstroke-dasharray／stroke-dashoffsetをtransitionさせており、線が描かれながら現れるアニメーションになっている。filter: drop-shadow()を複数重ねて立体感を出している点も注目ポイント。

💡 実装のポイント
hoverではなくinput[type="checkbox"]と:checked ~ セレクタを組み合わせた、いわゆる「チェックボックスハック」でクリック開閉を実現している点がこの記事内で唯一の実装。SCSSの@forループで9つの.shape要素にランダムな移動量を与え、開いたときに周囲へ飛び散るような演出を加えている。@keyframes pang-animationやstretch-animationなど複数のキーフレームを組み合わせた凝った構成。