もっと詳しく

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は、MUI (Material-UI) を使って矢印付きツールチップのコンポーネントを実装する機会があったため、その実装とスタイリングの方法についてまとめたいと思います。

今回の記事の実装も CodeSandbox で実際に触れることができますので、こちらも是非ご覧ください。

Tooltip コンポーネントについて

MUI にはマウスオーバーでツールチップを表示するコンポーネント Tooltip が標準で用意されており、手軽にツールチップコンポーネントを作成することができます。

Tooltip のデフォルトの表示
import * as React from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';

export default function BasicTooltip() {
  return (
    <Tooltip title="Delete" placement="bottom" arrow={false}>
      <IconButton>
        <DeleteIcon />
      </IconButton>
    </Tooltip>
  );
}

placement prop に top right left bottom などの方向を指定することで任意の方向にツールチップを表示させることができます。

また、 arrow prop を true に指定することで矢印付きツールチップにすることも出来ます。

arrow prop を true にした状態の表示

詳しいAPIについては公式ドキュメントをご覧ください。

props を指定するだけで矢印付きツールチップを実装することが出来ますが、矢印のサイズを変更するなど細かいスタイル調整がしたい場合は withStyles 等でコンポーネントのスタイルを上書きする必要があります。

Tooltip コンポーネントの細かいスタイルを調整する

以下は、 MUI のデフォルトのスタイルからツールチップの背景色と矢印のサイズを変更したコードです。

CodeSandbox

import * as React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import { withStyles } from "@mui/styles";

const StyledTooltip = withStyles({
  tooltip: {
    padding: "20px",
    backgroundColor: "black"
  },
  popperArrow: {
    '&[data-popper-placement*="top"], &[data-popper-placement*="right"], &[data-popper-placement*="left"], &[data-popper-placement*="bottom"]': {
      "& $arrow": {
        fontSize: "20px",
        color: "black"
      }
    }
  },
  arrow: {}
})(Tooltip);

function PositionedTooltips() {
  return (
    <>
      <StyledTooltip arrow title="Tooltip Text" placement="top">
        <Button>top</Button>
      </StyledTooltip>
      <StyledTooltip arrow title="Tooltip Text" placement="left">
        <Button>left</Button>
      </StyledTooltip>
      <StyledTooltip arrow title="Tooltip Text" placement="right">
        <Button>right</Button>
      </StyledTooltip>
      <StyledTooltip arrow title="Tooltip Text" placement="bottom">
        <Button>bottom</Button>
      </StyledTooltip>
    </>
  );
}
ツールチップの背景色と矢印のサイズを変更した状態の表示

withStyles で、MUI の Tooltip コンポーネントが持っている MuiTooltip-tooltip などの class のスタイルを上書きしています。

tooltip に指定したスタイルはそのままツールチップ自体 (= MuiTooltip-tooltip class が指定されている要素) のスタイルを上書きしています。

矢印のスタイルの上書きに関しては、矢印を生成している要素の親要素 (MuiTooltip-popperArrow class が指定されている要素) の data-popper-placement 属性に、 placement prop で指定した値が入っているため、この属性をセレクタで指定して各 placement 用のスタイルを上書きしています。

Tooltip の DOM。要素の赤枠で囲った属性に placement の値が入っている

"& $arrow" という風に $ を頭に付けて withStyles 内に記述した class 名を指定することで MUI の class を参照しています。（詳しくはMaterial-UI で focused / error のスタイルを上書きするのに手間取ったもご覧ください）

矢印は em で幅と高さが指定されているため、 fontSize を上書きすることによりサイズの変更が可能です。

popperArrow: {
  '&[data-popper-placement*="top"], &[data-popper-placement*="right"], &[data-popper-placement*="left"], &[data-popper-placement*="bottom"]': {
    "& $arrow": {
      fontSize: "20px",
      color: "black"
    }
  }
},

サンプルでは各 placement に一括で指定していますが、 placement ごとに当てるスタイルを変えることももちろん可能です。

まとめ

今回は、MUI (Material-UI) を使って矢印付きツールチップのコンポーネントを作成する方法についてまとめました。

MUI を使用している方の参考になれば幸いです。

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！

求人応募してみる！