Tooltipツールチップ

ホバーやフォーカス時に追加情報を表示する小さなポップアップです。要素の説明や補足情報を提供するために使用します。

更新 2025/7/28

基本的な使い方

要素にホバーするとツールチップが表示されます。アイコンボタンやリンクなど、追加の説明が必要な要素に使用してください。

import { Tooltip, Button, IconButton } from "@serendie/ui";
import { SerendieSymbol } from "@serendie/symbols";
import { HBox } from "src/components/LayoutUtils";
import { styled } from "styled-system/jsx";

const Span = styled("span", {
  base: {
    width: "fit-content",
  },
});

export function BasicSample() {
  return (
    <HBox alignItems="center">
      <Tooltip content="削除ボタンです。この操作は取り消せません。">
        <Span>
          <Button>削除</Button>
        </Span>
      </Tooltip>

      <Tooltip content="編集ボタンです">
        <Span>
          <Button styleType="outlined">編集</Button>
        </Span>
      </Tooltip>

      <Tooltip content="詳細情報を表示します">
        <Span>
          <IconButton
            icon={<SerendieSymbol name="information" />}
            styleType="ghost"
            size="small"
            shape="circle"
          />
        </Span>
      </Tooltip>
    </HBox>
  );
}

配置

ツールチップは8方向に配置できます。要素の位置や画面の端を考慮して、適切な配置を選択してください。

import { Tooltip, Button } from "@serendie/ui";
import { styled } from "../../../styled-system/jsx";

const Grid = styled("div", {
  base: {
    display: "grid",
    gridTemplateColumns: "repeat(3, 1fr)",
    gridTemplateRows: "repeat(3, 1fr)",
    gap: "6",
    maxWidth: "400px",
    margin: "0 auto",
    padding: "8",
  },
});

const GridItem = styled("div", {
  base: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
});

const Span = styled("span", {
  base: {
    width: "fit-content",
  },
});

export function PlacementSample() {
  return (
    <Grid>
      <GridItem style={{ gridColumn: "2" }}>
        <Tooltip content="上" placement="top">
          <Span>
            <Button size="small" styleType="ghost">
              Top
            </Button>
          </Span>
        </Tooltip>
      </GridItem>

      <GridItem style={{ gridColumn: "1", gridRow: "2" }}>
        <Tooltip content="左" placement="left">
          <Span>
            <Button size="small" styleType="ghost">
              Left
            </Button>
          </Span>
        </Tooltip>
      </GridItem>

      <GridItem style={{ gridColumn: "2", gridRow: "2" }} />

      <GridItem style={{ gridColumn: "3", gridRow: "2" }}>
        <Tooltip content="右" placement="right">
          <Span>
            <Button size="small" styleType="ghost">
              Right
            </Button>
          </Span>
        </Tooltip>
      </GridItem>

      <GridItem style={{ gridColumn: "2", gridRow: "3" }}>
        <Tooltip content="下" placement="bottom">
          <Span>
            <Button size="small" styleType="ghost">
              Bottom
            </Button>
          </Span>
        </Tooltip>
      </GridItem>
    </Grid>
  );
}

状態

disabledプロパティでツールチップを無効化できます。フォームの状態や権限に応じて動的に制御してください。

プロパティなし:

disabled:

import { Tooltip, Button } from "@serendie/ui";
import { styled } from "../../../styled-system/jsx";

const Span = styled("span", {
  base: {
    width: "fit-content",
  },
});

const Label = styled("span", {
  base: {
    fontSize: "sm",
    minWidth: "80px",
    textAlign: "right",
  },
});

const Grid = styled("div", {
  base: {
    display: "grid",
    gridTemplateColumns: "repeat(2, auto)",
    width: "fit-content",
    margin: "0 auto",
    rowGap: "sd.system.dimension.spacing.medium",
    columnGap: "sd.system.dimension.spacing.large",
    pr: "sd.system.dimension.spacing.medium",
  },
});

const GridItemContainer = styled("div", {
  base: {
    display: "grid",
    gridTemplateColumns: "subgrid",
    gridColumn: "span 2",
    alignItems: "center",
  },
});

export function StateSample() {
  return (
    <Grid>
      <GridItemContainer>
        <Label>プロパティなし:</Label>
        <Tooltip content="これは有効なツールチップです">
          <Span>
            <Button>enabledの場合</Button>
          </Span>
        </Tooltip>
      </GridItemContainer>

      <GridItemContainer>
        <Label>disabled:</Label>
        <Tooltip content="このツールチップは表示されません" disabled>
          <Span>
            <Button>disabledの場合</Button>
          </Span>
        </Tooltip>
      </GridItemContainer>
    </Grid>
  );
}