I am having difficulties making the Material UI tooltip actually appear when hovering over a component. As far as I can tell, I am doing about the simplest implementation of the tooltip component: I import it directly (no custom styles or anything else yet), and I wrap it around another component that spreads out its props at the top level.
From reading the documentation it should be that simple, but it is not appearing on hover, and in the React DevTools I see that the anchorEl prop of is undefined.
import Tooltip from '@material-ui/core/Tooltip';
const containerComponent = () => (
<Tooltip text="Planner"><PlannerIcon /></Tooltip>
)
PlannerIcon.js
const PlannerIcon = (props) => (
<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"
{...props}
>
<path d="M14.71,3.11V14.88H2.94V3.11H14.71m1-1H1.94V15.88H15.71V2.11Z"/>
<line x1="1.94" y1="9" x2="15.71" y2="9" strokeMiterlimit="10"/>
<line x1="8.83" y1="2.12" x2="8.83" y2="15.77" strokeMiterlimit="10"/>
</Icon>
);