fix(Tooltip): Tooltip trigger外に移動する際にtooltipを非表示にする

[daiHash]

関連URL

https://smarthr.atlassian.net/browse/SHRUI-1209

概要

Dropdown menuを表示/非表示の操作のtrigger buttonなどにtooltipでラベル表示のためラップすると、menu内操作中でもtooltipが表示されたままになるので、tooltip trigger外に移動する際にはtooltipを非表示にする

変更内容

• pointerenter時のeventListenerで現在の操作中要素がtooltip trigger内の要素なのかをチェックしてから、tooltipを表示/非表示にする

BEFORE - dropdown menu開いてTooltip trigger buttonから別の要素に移動するとtooltipが表示されたまま

Screen.Recording.2024-12-20.at.18.58.42.mov

Screen.Recording.2024-12-20.at.18.59.48.mov

AFTER- dropdown menu開いてTooltip trigger buttonから別の要素に移動するとtooltipが非表示になる

Screen.Recording.2024-12-20.at.18.54.25.mov

Screen.Recording.2024-12-20.at.18.53.35.mov

確認方法

ローカルでstorybookで確認できますが、dropdown menuのStoryにtooltipを追加する必要があります.
以下のcomponentのstoryに追加すると確認しやすいかと思います。こちらの問題がおきたプロダクト側ではinstallして検証済みです

• DropdownMenuButton
• packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/stories/DropdownMenuButton.stories.tsx

render: (args) => (
    <Tooltip
      message={'その他の操作'}
      horizontal="auto"
      vertical="bottom"
      triggerType="icon"
      tabIndex={-1}
    >
      <DropdownMenuButton {...args}>
        <Button>操作1</Button>
        <AnchorButton href="#">操作2</AnchorButton>
        <RemoteDialogTrigger targetId="remoteDialog" onClick={action('open-remote-dialog')}>
          <Button>操作3</Button>
        </RemoteDialogTrigger>
      </DropdownMenuButton>
    </Tooltip>
  ),

• SortDropdown
• packages/smarthr-ui/src/components/Dropdown/SortDropdown/stories/SortDropdown.stories.tsx

 render: (args) => (
    <Tooltip message={'その他の操作'} horizontal="auto" triggerType="icon" tabIndex={-1}>
      <SortDropdown {...args} />
    </Tooltip>
  ),

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/kufu/smarthr-ui@5219

commit: 8072d5d

[Qs-F]

LGTM！！ありがとうございます〜！

[Qs-F]

@daiHash VRTで差分が出てるので、確認してもらえると助かります！ (hover時のVRTがなんらかの理由で有効になってないかもです)

[daiHash]

@Qs-F
ご確認ありがとうございます。今回の変更でtooltip trigger以外の要素にホバーしているかをチェックするため、documentにeventListenerをつけてるので、VRT上でホバーされていないようになってしまっているようなのでちょっと確認してみます🙇‍♂️

[daiHash]

@Qs-F
実装を修正したため、tooltip関連のVRT分は問題なさそうです。お手すきの際再度ご確認よろしくお願いします🙇‍♂️