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.