メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.5
Theme

ツールチップコンポーネント

最終更新日:

CSS のみの Tailwind CSS ツールチップは上下左右に配置されます。カラーバリエーション、JavaScriptは必要ありません。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

ツールチップ コンポーネントは、ユーザーが要素の上にマウスを移動するか要素にフォーカスすると、追加情報を表示します。セマンティック HTML 属性と CSS を使用して構築されたツールチップは、インターフェイスを煩雑にすることなくコンテキスト固有のヘルプを提供することでユーザー エクスペリエンスを向上させます。 Frutjam ツールチップ システムは、複数の位置、カスタム コンテンツ、スムーズなアニメーションをサポートし、シームレスな情報発見を実現します。

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

注: ツールチップは :hover と :focus に依存していますが、タッチ/モバイル デバイスでは利用できません。モバイル ファースト レイアウトの場合は、レスポンシブ バリアント lg:tooltip を使用して、ツールヒントがデスクトップ (大画面以上) でのみアクティブになるようにします。小さい画面では、ポップオーバーやモーダルなど、別の開示パターンの使用を検討してください。

クラス タイプ 説明
tooltipベースホバー/フォーカス時に data-tip コンテンツを表示するラッパー
tooltip-content修飾子ツールチップバブル内のカスタム HTML コンテンツ
tooltip-top修飾子トリガーの上で開きます (デフォルト)
tooltip-bottom修飾子トリガーの下で開きます
tooltip-left修飾子トリガーの左側に開きます
tooltip-right修飾子トリガーの右側に開きます
tooltip-start修飾子論理スタート側に開きます
tooltip-end修飾子論理エンド側に開きます
tooltip-primary色主要テーマカラーバブル
tooltip-secondary色二次テーマのカラーバブル
tooltip-accent色アクセントテーマカラーバブル
tooltip-neutral色ニュートラルテーマカラーバブル
tooltip-info色情報セマンティックカラーバブル
tooltip-success色成功のセマンティック カラー バブル
tooltip-warning色警告セマンティックカラーバブル
tooltip-error色エラー セマンティック カラー バブル

ツールチップ

1
2
3
<div class="tooltip" data-tip="Tooltip">
   <button class="btn">Hover me</button>
</div>

1
2
3
<div className="tooltip" data-tip="Tooltip">
   <button className="btn">Hover me</button>
</div>

カスタムツールチップコンテンツ

❤️
Like
html 
1
2
3
4
5
6
7
<div class="tooltip tooltip-end">
    <div class="tooltip-content">
        <div class="text-xl">❤️</div>
        <div>Like</div>
    </div>
    <button class="btn">Hover me</button>
</div>

アイコン付きのツールチップ

html 
1
2
3
4
5
6
<div class="tooltip" data-tip="Menu">
    <button class="btn btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>
        <span class="sr-only">Menu</span>
    </button>
</div>

ツールチップを強制的に開く

html 
1
2
3
<div class="tooltip tooltip-open" data-tip="hello">
  <button class="btn">Force open</button>
</div>

ツールチップの配置オプション

上部の配置

html 
1
2
3
<div class="tooltip tooltip-top tooltip-open" data-tip="Tooltip top">
    <button class="btn">Top position</button>
</div>

適切な配置

html 
1
2
3
<div class="tooltip tooltip-right tooltip-open" data-tip="Tooltip right">
    <button class="btn">Right position</button>
</div>

端部の配置

html 
1
2
3
<div class="tooltip tooltip-end tooltip-open" data-tip="Tooltip end">
    <button class="btn">End position</button>
</div>

下部の配置

html 
1
2
3
<div class="tooltip tooltip-bottom tooltip-open" data-tip="Tooltip bottom">
    <button class="btn">Bottom position</button>
</div>

左の配置

html 
1
2
3
<div class="tooltip tooltip-left tooltip-open" data-tip="Tooltip left">
    <button class="btn">Left position</button>
</div>

配置の開始

html 
1
2
3
<div class="tooltip tooltip-start tooltip-open" data-tip="Tooltip start">
    <button class="btn">Start position</button>
</div>

ツールチップのカラーバリエーション

原色

html 
1
2
3
<div class="tooltip tooltip-primary tooltip-open" data-tip="Primary">
  <button class="btn btn-xs">Primary color</button>
</div>

二次色

html 
1
2
3
<div class="tooltip tooltip-secondary tooltip-open" data-tip="Secondary">
  <button class="btn btn-xs">Secondary color</button>
</div>

アクセントカラー

html 
1
2
3
<div class="tooltip tooltip-accent tooltip-open" data-tip="Accent">
  <button class="btn btn-xs">Accent color</button>
</div>

情報の色

html 
1
2
3
<div class="tooltip tooltip-info tooltip-open" data-tip="Info">
  <button class="btn btn-xs">Info color</button>
</div>

サクセスカラー

html 
1
2
3
<div class="tooltip tooltip-success tooltip-open" data-tip="Success">
  <button class="btn btn-xs">Success color</button>
</div>

警告色

html 
1
2
3
<div class="tooltip tooltip-warning tooltip-open" data-tip="Warning">
  <button class="btn btn-xs">Warning color</button>
</div>

エラーの色

html 
1
2
3
<div class="tooltip tooltip-error tooltip-open" data-tip="Error">
  <button class="btn btn-xs">Error color</button>
</div>

ニュートラルカラー

html 
1
2
3
<div class="tooltip tooltip-neutral tooltip-open" data-tip="Neutral">
  <button class="btn btn-xs">Neutral color</button>
</div>

レスポンシブツールチップ

lg:tooltip を使用して大きな画面でのみ表示します

html 
1
2
3
<div class="lg:tooltip" data-tip="Hey there!">
  <button class="btn">Hover me</button>
</div>

JS と React ヘルパー

frutjam/js の createTooltip または frutjam/r​​eact の useTooltip を使用して、ツールチップをプログラムで表示または非表示にします。ガイド付きツアーやトリガーされたヘルプ テキストに役立ちます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="flex gap-2 mb-4">
  <button class="btn btn-sm" id="tip-show">Show</button>
  <button class="btn btn-sm" id="tip-hide">Hide</button>
  <button class="btn btn-sm" id="tip-toggle">Toggle</button>
</div>
<div class="tooltip" data-tip="Programmatic tooltip" id="js-tooltip">
  <button class="btn">Target</button>
</div>
<script type="module">
  import { createTooltip } from 'frutjam/js'
  const tip = createTooltip(document.getElementById('js-tooltip'))
  document.getElementById('tip-show').onclick = () => tip.show()
  document.getElementById('tip-hide').onclick = () => tip.hide()
  document.getElementById('tip-toggle').onclick = () => tip.toggle()
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useTooltip } from 'frutjam/react'

export default function TooltipDemo() {
  const tooltip = useTooltip()
  return (
    <>
      <div className="flex gap-2 mb-4">
        <button className="btn btn-sm" onClick={tooltip.show}>Show</button>
        <button className="btn btn-sm" onClick={tooltip.hide}>Hide</button>
        <button className="btn btn-sm" onClick={tooltip.toggle}>Toggle</button>
      </div>
      <div ref={tooltip.ref} className="tooltip" data-tip="Programmatic tooltip">
        <button className="btn">Target</button>
      </div>
    </>
  )
}

Claude コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確な ツールチップ クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる