Lism Tips

Tooltip（ツールチップ）

Tooltip は、ボタンなどにマウスを乗せたりキーボードで選んだりしたときに、短い説明を小さく出す UI コンポーネントです。向き・待ち時間・色の変え方をまとめます。

Tooltip は、ボタンなどにマウスを乗せたときや、キーボードで選んだときに、短い補足の文字を小さく出すコンポーネントです。出す・消すは CSS だけで行い、JavaScript は Esc キーで閉じるときにだけ使います。

どんなときに使う？#

  • アイコンだけのボタンに、何をするボタンかを添えたいとき
  • 「ショートカット：Ctrl+S」のような、ちょっとした補足を見せたいとき

窓の中にリンクやボタンを置きたいときは、押して開く Popover（クリックで開く小窓） を使います。

使い方#

b--tooltip の箱の中に、きっかけになるボタン（b--tooltip_trigger）と、出す文字（b--tooltip_popup）をこの順で入れます。ボタンの aria-describedby と、文字の id に同じ名前を書きます。文字には role="tooltip" を付けます。

表示例

ショートカット：Ctrl + S
html
<span class="b--tooltip">
  <button class="-bd -px:15 -py:5 -bdrs:10 b--tooltip_trigger set--plain" type="button" aria-describedby="demo-tt-1">保存</button>
  <span class="b--tooltip_popup" role="tooltip" id="demo-tt-1" data-side="top" data-align="center">ショートカット：Ctrl + S</span>
</span>
クラス 付ける場所
b--tooltip 全体を包む箱
b--tooltip_trigger きっかけになる要素（ふつうは button）
b--tooltip_popup 出す文字

出るのは2つの場合です。全体の箱（b--tooltip）の上にマウスがあるときと、ボタンがキーボードで選ばれているとき（:focus-visible）です。マウスをボタンから出てきた文字のほうへ動かしても、文字は残ります。

Esc キーで文字をすぐ消すこともできます。消したあとは、マウスか選択をいちど外へ出して戻せば、また出ます。消した状態かどうかは、b--tooltip に付く data-dismissed 属性で見分けています。

Esc で閉じる動きには、@lism-css/ui のスクリプト（dist/scripts/tooltip.js）を読み込みます。

注意
  • HTML の順番は「ボタン → 文字」にします。キーボードで選んだときに文字を出す CSS は、ボタンの後ろにある兄弟の要素しか選べません。逆に並べると、キーボードでは出なくなります
  • きっかけの要素は、Tab キーで選べるものにします。span などにするなら tabindex="0" を足します（button ならそのままで選べます）
  • 指で画面をさわる機器にはマウスを乗せる操作がないので、文字が見られないことがあります。なくてはならない情報は、ほかの場所にも書いておきます
  • 文字の中にはリンクやボタンを入れません。押せるものを入れたいなら Popover にします

出る向きとそろえ方#

文字の data-side で出る向きを、data-align でそろえる位置を決めます。

属性 値 初期値
data-side top（上）・bottom（下）・start（左）・end（右） top
data-align start・center・end center

表示例

top bottom end bottom / start
html
<div class="l--cluster -g:10">
  <span class="b--tooltip">
    <button class="-bd -px:15 -py:5 -bdrs:10 b--tooltip_trigger set--plain" type="button" aria-describedby="demo-tt-2">上</button>
    <span class="b--tooltip_popup" role="tooltip" id="demo-tt-2" data-side="top" data-align="center">top</span>
  </span>
  <span class="b--tooltip">
    <button class="-bd -px:15 -py:5 -bdrs:10 b--tooltip_trigger set--plain" type="button" aria-describedby="demo-tt-3">下</button>
    <span class="b--tooltip_popup" role="tooltip" id="demo-tt-3" data-side="bottom" data-align="center">bottom</span>
  </span>
  <span class="b--tooltip">
    <button class="-bd -px:15 -py:5 -bdrs:10 b--tooltip_trigger set--plain" type="button" aria-describedby="demo-tt-4">右</button>
    <span class="b--tooltip_popup" role="tooltip" id="demo-tt-4" data-side="end" data-align="center">end</span>
  </span>
  <span class="b--tooltip">
    <button class="-bd -px:15 -py:5 -bdrs:10 b--tooltip_trigger set--plain" type="button" aria-describedby="demo-tt-5">下・左寄せ</button>
    <span class="b--tooltip_popup" role="tooltip" id="demo-tt-5" data-side="bottom" data-align="start">bottom / start</span>
  </span>
</div>
  • data-side が top・bottom のときは、data-align が横のそろえ方になります。左から右へ書くページ（dir="ltr"）では start が左寄せ、end が右寄せで、右から左へ書くページ（dir="rtl"）では逆になります
  • data-side が start・end のときは、data-align が縦のそろえ方になり、start が上、end が下です
  • data-side の start・end も書く向きに合わせて決まり、dir="ltr" では start が左、end が右です
  • どの向きでも、画面のはしに入りきらないときは、自動で反対側に出ます

専用の変数#

どれも b--tooltip（またはその外側の要素）に書きます。文字（b--tooltip_popup）に書いても効きません。

変数 決めること 初期値
--tooltip-offset ボタンと文字のあいだのすきま var(--s5)
--tooltip-delay 出るまでの待ち時間 0.4s
--tooltip-delay--close 消えるまでの待ち時間（ボタンから文字へマウスを動かすあいだ、消えないようにする） 0.15s
--tooltip-duration ふわっと変わる時間 0.15s
--tooltip-arrow 吹き出しの矢印の高さ（0 で矢印なし） 4px

動きを減らす設定（prefers-reduced-motion: reduce）の画面では、ふわっと変わる時間は 0s になります（待ち時間はそのままです）。

表示例

待ち時間 0 秒 すきま 1rem
html
<div class="l--cluster -g:10">
  <span class="b--tooltip" style="--tooltip-delay:0s">
    <button class="-bd -px:15 -py:5 -bdrs:10 b--tooltip_trigger set--plain" type="button" aria-describedby="demo-tt-6">すぐ出る</button>
    <span class="b--tooltip_popup" role="tooltip" id="demo-tt-6" data-side="top" data-align="center">待ち時間 0 秒</span>
  </span>
  <span class="b--tooltip" style="--tooltip-delay:1s;--tooltip-offset:1rem">
    <button class="-bd -px:15 -py:5 -bdrs:10 b--tooltip_trigger set--plain" type="button" aria-describedby="demo-tt-7">1秒後に出る</button>
    <span class="b--tooltip_popup" role="tooltip" id="demo-tt-7" data-side="top" data-align="center">すきま 1rem</span>
  </span>
</div>

色を変える#

はじめの見た目は、背景が --text（文字の色）、文字が --base（背景の色）の、色を入れかえた形です。色・余白・角丸・影は、文字の要素に -bgc・-c・-p・-bdrs・-bxsh などのクラスを付けて変えます。

表示例

背景と文字の色、余白を変えています。
html
<span class="b--tooltip">
  <button class="-bd -px:15 -py:5 -bdrs:10 b--tooltip_trigger set--plain" type="button" aria-describedby="demo-tt-8">色を変えた例</button>
  <span class="b--tooltip_popup -bgc:base-2 -c:text -bd -p:15 -bdrs:10 -bxsh:20" role="tooltip" id="demo-tt-8" data-side="top" data-align="center">背景と文字の色、余白を変えています。</span>
</span>

ブラウザによる違い#

文字をボタンのそばに置くのには、CSS Anchor Positioning（ある要素を目じるしにして、別の要素の位置を決める CSS のしくみ）を使っています。

  • Firefox ESR 140 のように、このしくみを使えないブラウザでは、b--tooltip の箱を基準にした位置に出ます。そのときは、はしで反対側に出る動きが無いので、文字が切れて見えることがあります。--tooltip-offset のすきまも効きません
  • Firefox 147 以降では位置は正しく決まりますが、消えるときのふわっとした動きと --tooltip-delay--close の待ち時間が効かず、マウスを外すとすぐ消えます（出るときの動きと待ち時間は効きます）

しくみ#

おもな CSS は次のとおりです（位置を決める部分は長いので省いています）。

css
.b--tooltip {
  --duration: var(--tooltip-duration, 0.15s);
  --delay: var(--tooltip-delay, 0.4s);
  --delay--close: var(--tooltip-delay--close, 0.15s);
  --offset: var(--tooltip-offset, var(--s5));
  --arrow-sz: var(--tooltip-arrow, 4px);
  display: inline-block;
}
.b--tooltip_popup {
  --lh: 1.25;
  z-index: 10;
  inline-size: max-content;
  max-inline-size: min(20rem, 90vw);
  padding: 0.375em 0.625em;
  border-radius: var(--bdrs--10);
  background-color: var(--text);
  color: var(--base);
  font-size: var(--fz--s);
  visibility: hidden;
  opacity: 0;
}
.b--tooltip:hover > .b--tooltip_popup,
.b--tooltip_trigger:focus-visible ~ .b--tooltip_popup {
  visibility: visible;
  opacity: 1;
  transition-delay: var(--delay);
}
.b--tooltip[data-dismissed] > .b--tooltip_popup {
  visibility: hidden;
  opacity: 0;
}

文字の幅は中身に合わせて決まり、いちばん広くても 20rem か画面の幅の 90% までです。

React・Astro で書く場合#

@lism-css/ui/react/Tooltip（Astro は @lism-css/ui/astro/Tooltip）から Tooltip を読み込みます。部品は <Tooltip.Root>・<Tooltip.Trigger>・<Tooltip.Popup> です。<Tooltip.Root> の中に並べると、aria-describedby と id が自動でつながります。

jsx
import { Tooltip } from '@lism-css/ui/react/Tooltip';

<Tooltip.Root tooltipId="tt-01" delay="0s">
  <Tooltip.Trigger className="-bd -px:15 -py:5 -bdrs:10">保存</Tooltip.Trigger>
  <Tooltip.Popup side="bottom">ショートカット：Ctrl + S</Tooltip.Popup>
</Tooltip.Root>
Props 決めること
tooltipId <Tooltip.Root> 用。ボタンと文字をつなぐ名前。書かなければ自動で作られる
delay <Tooltip.Root> 用。出るまでの待ち時間（--tooltip-delay になる）
offset <Tooltip.Root> 用。ボタンと文字のすきま（--tooltip-offset になる）
side <Tooltip.Popup> 用。出る向き（data-side になる。初期値 top）
align <Tooltip.Popup> 用。そろえ方（data-align になる。初期値 center）
tooltipId・id <Tooltip.Trigger> の tooltipId と <Tooltip.Popup> の id。<Tooltip.Root> を使わず、部品を離して置くときだけ書く
注意

<Tooltip.Root> の中では、<Tooltip.Trigger> や <Tooltip.Popup> に名前（tooltipId・id）を書かないでください。一部だけに書くと、つながりが切れます。名前を決めたいときは <Tooltip.Root> の tooltipId だけを使います。

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧