🐕

Material-UIでマウスホバーで説明テキストを表示

2022/01/21に公開

Material-UIを利用して表示したアイコンに、マウスを当てた際に説明のテキストを表示する方法になります。

ホバー画像
イメージ

コード

Tooltipを利用します。
title部分に表示したいテキストを設定して、中をアイコンで囲めば表示されます。

<Tooltip title="コピー">
  <IconButton edge="end">
    <ContentCopyIcon />
  </IconButton>
</Tooltip>

参考情報

mui.com Tooltip

Discussion