react-tooltipを使って、ReactでBootstrapっぽいツールチップを表示する

概要

ReactでBootstrapのTooltipが使えないので、react-tooltipを使ってbootstrapっぽいツールチップを表示してみました。

比較

bootstrap

react-tooltip

バージョン

"react": "^16.4.0",
"react-tooltip": "^3.9.0",

実行方法

yarn add react-tooltip

button.jsx

import React from 'react';
import ReactTooltip from 'react-tooltip';

const Button = props => (
  <button type="button" data-tip="一覧から選択">
    アイコン
    <ReactTooltip effect="solid" place="bottom" />
  </button>
);

export default Button;

デフォルトだと表示がeffect="float" place="top"になっているので、effect="solid" place="bottom"に変更しています。