Tooltip

Tooltipコンポーネントは、スペースが限られている場所で、補足テキストを一時的に表示するために使います。

SmartHR UIではTooltipです。

SmartHR UI

処理中

ドラッグして幅を変更

ドラッグして高さを変更

import { Story } from '@storybook/react'
import { userEvent } from '@storybook/testing-library'
import * as React from 'react'
import styled from 'styled-components'

import { Button } from '../Button'
import {
  FaArrowAltCircleDownIcon,
  FaArrowAltCircleLeftIcon,
  FaArrowAltCircleRightIcon,
  FaArrowAltCircleUpIcon,
} from '../Icon'

import { Tooltip } from './Tooltip'

export default {
  title: 'Data Display（データ表示）/Tooltip',
  component: Tooltip,
}

const Template: Story = () => (
  <List>
    <dt>Default</dt>
    <dd>
      <Tooltip message="LightBalloon">LightTooltip</Tooltip>
    </dd>
    <dt>horizontal & vertical</dt>
    <dd>
      <Tooltip
        message="horizontal=left & vertical=bottom (default)"
        horizontal="left"
        vertical="bottom"
      >
        horizontal=left & vertical=bottom (default)
      </Tooltip>
    </dd>
    <dd className="center">
      <Tooltip message="horizontal=center & vertical=bottom" horizontal="center" vertical="bottom">
        horizontal=center & vertical=bottom
      </Tooltip>
    </dd>
    <dd className="right">
      <Tooltip message="horizontal=right & vertical=bottom" horizontal="right" vertical="bottom">
        horizontal=right & vertical=bottom
      </Tooltip>
    </dd>
    <dd>
      <Tooltip message="horizontal=left & vertical=middle" horizontal="left" vertical="middle">
        horizontal=left & vertical=middle
      </Tooltip>
    </dd>
    <dd className="right">
      <Tooltip message="horizontal=right & vertical=middle" horizontal="right" vertical="middle">
        horizontal=right & vertical=middle
      </Tooltip>
    </dd>
    <dd>
      <Tooltip message="horizontal=left & vertical=top" horizontal="left" vertical="top">
        horizontal=left & vertical=top
      </Tooltip>
    </dd>
    <dd className="center">
      <Tooltip message="horizontal=center & vertical=top" horizontal="center" vertical="top">
        horizontal=center & vertical=top
      </Tooltip>
    </dd>
    <dd className="right">
      <Tooltip message="horizontal=right & vertical=top" horizontal="right" vertical="top">
        horizontal=right & vertical=top
      </Tooltip>
    </dd>
    <dt>ellipsisOnly</dt>
    <dd className="limit">
      <Tooltip message="invisible message" ellipsisOnly={true}>
        ellipsisOnly: invisible
      </Tooltip>
    </dd>
    <dd className="limit">
      <Tooltip message="visible message" ellipsisOnly={true}>
        <Text>
          ellipsisOnly: visible: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la
          Santísima Trinidad Ruiz Picasso
        </Text>
      </Tooltip>
    </dd>
    <dt>multiLine</dt>
    <dd className="limit">
      <Tooltip
        message="Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la Santísima Trinidad Ruiz Picasso"
        multiLine={true}
      >
        MultiLineMessage: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la
        Santísima Trinidad Ruiz Picasso
      </Tooltip>
    </dd>
    <dt>ReactNode message attribute</dt>
    <dd>
      <Tooltip
        message={
          <>
            MultiLineMessage
            <br />
            MultiLine 1<br />
            MultiLine 2<br />
            MultiLine 3<br />
            ...
          </>
        }
      >
        <Text>
          MultiLineMessage: Pablo Diego José Francisco de Paula Juan Nepomuceno Cipriano de la
          Santísima Trinidad Ruiz Picasso
        </Text>
      </Tooltip>
    </dd>
    <dt>triggerType</dt>
    <dd className="center">
      <Tooltip
        message="horizontal=left & vertical=bottom (default)"
        horizontal="left"
        vertical="bottom"
        triggerType="icon"
      >
        <FaArrowAltCircleUpIcon alt="フォーカスすると情報が表示されます" />
      </Tooltip>
      <Tooltip
        message="horizontal=center & vertical=bottom"
        horizontal="center"
        vertical="bottom"
        triggerType="icon"
      >
        <FaArrowAltCircleUpIcon alt="フォーカスすると情報が表示されます" />
      </Tooltip>
      <Tooltip
        message="horizontal=right & vertical=bottom"
        horizontal="right"
        vertical="bottom"
        triggerType="icon"
      >
        <FaArrowAltCircleUpIcon alt="フォーカスすると情報が表示されます" />
      </Tooltip>
      <Tooltip
        message="horizontal=left & vertical=middle"
        horizontal="left"
        vertical="middle"
        triggerType="icon"
      >
        <FaArrowAltCircleRightIcon alt="フォーカスすると情報が表示されます" />
      </Tooltip>
      <Tooltip
        message="horizontal=right & vertical=middle"
        horizontal="right"
        vertical="middle"
        triggerType="icon"
      >
        <FaArrowAltCircleLeftIcon alt="フォーカスすると情報が表示されます" />
      </Tooltip>
      <Tooltip
        message="horizontal=left & vertical=top"
        horizontal="left"
        vertical="top"
        triggerType="icon"
      >
        <FaArrowAltCircleDownIcon alt="フォーカスすると情報が表示されます" />
      </Tooltip>
      <Tooltip
        message="horizontal=center & vertical=top"
        horizontal="center"
        vertical="top"
        triggerType="icon"
      >
        <FaArrowAltCircleDownIcon alt="フォーカスすると情報が表示されます" />
      </Tooltip>
      <Tooltip
        message="horizontal=right & vertical=top"
        horizontal="right"
        vertical="top"
        triggerType="icon"
      >
        <FaArrowAltCircleDownIcon alt="フォーカスすると情報が表示されます" />
      </Tooltip>
    </dd>
    <dt>disabled ボタン</dt>
    <dd>
      <Tooltip message="disabled なボタンに表示するツールチップです">
        <Button disabled>ボタン</Button>
      </Tooltip>
    </dd>
    <dt>自動位置決め</dt>
    {[undefined, 'center', 'right'].map((className, i) => (
      <dd className={className} key={i}>
        <Tooltip
          message="メッセージメッセージメッセージメッセージメッセージメッセージメッセージ"
          horizontal="auto"
          vertical="auto"
        >
          horizontal=auto & vertical=auto
        </Tooltip>
      </dd>
    ))}
    <dd style={{ marginBottom: '100vh' }}>
      <Tooltip
        message="メッセージメッセージメッセージメッセージメッセージメッセージメッセージ"
        horizontal="auto"
        vertical="auto"
        multiLine
      >
        multiLine 指定時
      </Tooltip>
    </dd>
  </List>
)
export const All = Template.bind({})

export const RegHover = Template.bind({})
RegHover.play = ({ canvasElement }) => {
  const tooltips = canvasElement.querySelectorAll('.smarthr-ui-Tooltip')
  tooltips.forEach((tooltip) => userEvent.hover(tooltip))
}

const List = styled.dl`
  margin: 50px 0;
  padding: 0 24px;
  list-style: none;

  & > {
    dt {
      font-weight: bold;
      &:not(:first-child) {
        margin-top: 16px;
      }
    }
    dd {
      margin-top: 5px;

      &.limit {
        width: 200px;
      }
      &.center {
        text-align: center;
      }
      &.right {
        text-align: right;
      }
    }
  }
`

const Text = styled.span`
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`

処理中

使いどころ

Tooltipは、UI上のスペースに余裕がない場合に、以下の目的で使います。

補足的な説明テキストを表示する場合
アイコンだけのボタンにラベルを表示する場合
省略されたテキストを全文表示する場合

Tooltipの使用を避けるケース

Tooltip内の情報は隠れるため、操作に必要な情報の表示への使用は避けましょう。ユーザーが把握しておかないと操作が進められないような重要な情報は、常に表示しておく方法を検討してください。

重要な情報とは、フォームの入力に必要な情報などが該当します。具体例は次の通りです。

パスワードに使用できる文字や、エラーになる入力値などの入力要件
入力エラーとなった際のエラーメッセージ

種類

Tooltipはトリガー要素にfocusやhoverで表示します。詳しくはトリガーパターンを参照してください。

レイアウト

1. Tooltip

Tooltipそのものです。吹き出し形式で補足的なテキストを表示します。

2. トリガー

Tooltipが表示されるきっかけとなる要素を「トリガー」と呼びます。
トリガーは、Tooltipが表示されることをユーザーに示唆するために、マウスオーバーが可能な要素であることを想起させるテキスト、アイコン、色を組み合わせます。

Tooltipの配置

Tooltipの配置は8種類の選択肢があります。

矢印の出る方向をhorizontal（横）とvertical（縦）の組み合わせで指定します。
レイアウトによってTooltipの一部が見切れる場合があるため、Tooltip全体が表示されるように指定してください。
horizontal（横）とvertical（縦）の両方にautoを指定すると、レイアウトを加味して自動的に方向を決めてくれます。

上配置

下配置

横配置

自動配置

ライティング

文章は、簡潔なテキストになるよう心がけてください。
1文のみの場合でも、文章には句点をつけます。
単語/ラベルのみの場合は句点を省略します。

デザインパターン

Tooltipのトリガーパターン

トリガーは、用途によっていくつかの種類に分けられます。

A. テキスト＋アイコン
B. アイコンのみ
C. アイコンボタン
D. 省略テキスト

A. テキスト＋アイコン

文章でさらに補足したい内容がある場合に使います。
補足する対象となるテキストの横に「」アイコン（FaInfoCircleIcon）を配置し、補足情報の存在を明確に表示します。アイコンの色は、テキストと同様にTEXT_LINKとすることで、マウスオーバーが可能であることを示唆します。

B. アイコンのみ

充分にスペースを確保できないときに、アイコン単体をトリガーにするパターンですが、どうしても他に方法がないときだけ使用してください。
何を対象とした補足説明なのかを明確にするために、可能な限り「テキスト＋アイコン」を採用することを推奨します。

アイコンは、マウスオーバーが可能であることを示唆するためにリンク色（TEXT_LINK）を使います。

テキストとあわせて使用

テキスト

タイトル

トリガーとなるのはアイコンのみで、タイトルやよくあるテーブルのオブジェクト名のテキストとあわせて使います。
タイトルやよくあるテーブルのオブジェクト名の遷移リンクの役割を阻害しないために、アイコンのみにTEXT_GRAYを使います。

ステータスの補足に使用

テキスト

ステータスの補足説明を加えるときにはテキストの左に配置し、ステータスの色に合わせます。
トリガーはステータスアイコンのみとなるので、テキストはリンクとして使用できます。

C. アイコンボタン

Buttonのアイコンボタンのように、ラベルテキストを表示できないボタンに、（ラベルテキスト相当の）機能を表す補足をTooltipで表示するパターンです。

Textボタンのアイコンボタンには使用しません。

ボタンは明確なアクションを促す役割を持つため、ラベルテキスト以上の説明を表示したい場合は、ラベルテキストがあるボタンの採用や、説明テキストが入るようなレイアウトを検討しましょう。

D. 省略テキスト

テキストを表示するスペースを十分確保できないときに、テキスト全体をトリガーとして、省略したすべてのテキストをTooltipで表示するパターンです。

テキストは、ellipsisを使い省略されていることを示します。

単純に文章を省略したい場合には、LineClampコンポーネントを使用してください。

Props

Name	Required	Type	Description
message	true	`string`, `number`, `false`, `true`, `ReactElement<any, string \| JSXElementConstructor<any>>`, `ReactFragment`, `ReactPortal`	ツールチップ内に表示するメッセージ
children	true	`string`, `number`, `false`, `true`, `ReactElement<any, string \| JSXElementConstructor<any>>`, `ReactFragment`, `ReactPortal`	ツールチップを表示する対象の要素
triggerType	-	`"text"`, `"icon"`	ツールチップを表示する対象のタイプ。アイコンの場合は `icon` を指定する
multiLine	-	`false`, `true`	ツールチップ内を複数行で表示する場合に `true` を指定する
ellipsisOnly	-	`false`, `true`	`true` のとき、ツールチップを表示する対象が省略されている場合のみツールチップ表示を有効にする
horizontal	-	`"auto"`, `"center"`, `"left"`, `"right"`	水平方向の位置
vertical	-	`"auto"`, `"top"`, `"middle"`, `"bottom"`	垂直方向の位置
tabIndex	-	`number`	ツールチップを表示する対象の tabIndex 値
ariaDescribedbyTarget	-	`"wrapper"`, `"inner"`	ツールチップを内包要素に紐付けるかどうか