How to Show ToolTip on Hover of React-Bootstrap Table Cell

React-Bootstrap has a great Overlay and Tooltip component combo for showing ToolTips on any component. We can even wrap Table cells, but it can be challenging to add a ToolTip on cell hover without lots of redundant code.

Here’s what we will build in this tutorial:

React-Bootstrap Table Cell with Hover

Depending on how we want to add ToolTips, we need to manually add hover on the cells. We can do this with mouse over and mouse out event handlers. These will set a show state value to the opposite of its current value:

<td onMouseOver={() => setShow(!show)} onMouseOut={() => setShow(!show)/>

Make sure that the show value is false by default:

const [show, setShow] = useState(false);

Now we can perform whatever action is desired on cell hover. For example, we can add an Overlay and manually construct a ToolTip. Or we could conditionally add a class to style the cell:

<td 
  onMouseOver={() => setShow(!show)} 
  onMouseOut={() => setShow(!show)
  className={show ? "cellStyle" : ""}
/>

Here are several ways to apply hover to a React-Bootstrap Card.

Show ToolTip on React-Bootstrap Table Cell Hover

Instead of manually controlling the hover behavior of the React-Bootstrap Table cell, we can use the OverlayTrigger and Tooltip components. The OverlayTrigger wraps its target and auto-detects hover.

In this tutorial I created a separate file and component for the Table cell so that we don’t add duplicate OverlayTrigger code:

import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Tooltip from "react-bootstrap/Tooltip";
import { TooltipProps } from "react-bootstrap/Tooltip";
import "./ToolTipTable.scss";

interface ToolTipTableCellProps {
  children: string;
  helperText: string;
}

export default function ToolTipTableCell(props: ToolTipTableCellProps) {
  const helperText = props.helperText;

  const renderTooltip = (props: TooltipProps) => (
    <Tooltip id="cell-tooltip" {...props}>
      {helperText}
    </Tooltip>
  );

  return (
    <OverlayTrigger
      placement="top"
      overlay={renderTooltip}
    >
      <td>{props.children}</td>
    </OverlayTrigger>)
}

The tooltip above automatically has an arrow on it. However, its difficult to learn more about the Tooltip because the React-Bootstrap docs for the component show a 404 error.

I manually created a tooltip in this demo so that I could add a great border to it.