Zenn
🐜

AntDesignのTooltipでdisabled的な事をしたい

2022/09/22に公開
antd
tech

訂正:titleに空文字渡せばdisabledみたいになります

  <Tooltip　title="">
    {children}
  </Tooltip>

↓↓↓↓↓↓↓↓　誤りの記事 ↓↓↓↓↓↓↓↓↓↓↓↓↓

結論

triggerのpropsに''を渡すとTooltipが表示されなくなるハック的なやり方です。

  <Tooltip　trigger={disabled ? '' : 'hover'}>
    {children}
  </Tooltip>

↓こんな感じ

import React from 'react'
import { Tooltip as AntTooltip, TooltipProps } from 'antd'

type Props = { disabled: boolean } & TooltipProps
const Tooltip: React.FC<Props> = ({ disabled, children, trigger, ...props }) => 
  <AntTooltip
    {...props}
    trigger={disabled ? '' : trigger}
  >
    {children}
  </AntTooltip>

課題

Tooltipにdisabled的なpropsが存在しない

Buttonコンポーネントの様にdisabledを指定して、特定の条件の時だけtooltipが表示されないようにしたい！

しかし、AntdのTooltipのAPI部分を見る限り、その様なものはない。

https://ant.design/components/tooltip/#API

open propは違う

openなどはtrueにするとtooltipを表示するpropなので、
この条件の時は何をしても表示しないみたいな事ができない。

現状ではtriggerでハックできる

triggerに''を渡すとTooltipの表示を防ぐ事を利用して、下記の様なラッパーコンポーネントを作ったりして一応は対策が可能…だが。

ハック的なやり方なので、antdのアップデートで急にできなることも考慮して使う必要がある。

import React from 'react'
import { Tooltip as AntTooltip, TooltipProps } from 'antd'

type Props = { disabled: boolean } & TooltipProps
const Tooltip: React.FC<Props> = ({ disabled = false, children, trigger, ...props }) => 
  <AntTooltip
    {...props}
    trigger={disabled ? '' : trigger}
  >
    {children}
  </AntTooltip>

Discussion