Tooltip

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

SmartHR UIではTooltipです。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
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はトリガー要素にfocushoverで表示します。詳しくはトリガーパターンを参照してください。

レイアウト

構成

  1. Tooltip
  2. トリガー

Tooltipによる補足情報の構成要素

1. Tooltip

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

2. トリガー

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

Tooltipの配置

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

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

上配置

下配置

横配置

自動配置

ライティング

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

デザインパターン

Tooltipのトリガーパターン

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

A. テキスト+アイコン

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

B. アイコンのみ

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

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

テキストとあわせて使用
テキスト
タイトル

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

ステータスの補足に使用
テキスト
テキスト

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

C. アイコンボタン

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

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

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

D. 省略テキスト

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

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

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

Props

NameRequiredTypeDescription
messagetruestring, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalツールチップ内に表示するメッセージ
childrentruestring, 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"ツールチップを内包要素に紐付けるかどうか