Conditionally render tooltip dependant on state
I have a table and would like to conditionally render a tooltip on hover of a cell.
Is this possible?
My content is conditionally rendered outside of the table, but won't work when adding to the cell.
My onmouse events work as expected.
Here is some example code:
```
const [showTooltip, setShowTooltip] = useState(false);
{
header: 'Status',
accessorKey: 'status',
cell: (row) => (
<div
onMouseEnter={() => {
setShowTooltip(true);
}}
onMouseLeave={() => {
setShowTooltip(false);
}}
>
{getCellCopyDependantOnStatus(row, copyConfig)}
{showTooltip && 'Tooltip'}
</div>
),
},
1 Reply
metropolitan-bronze•3y ago
Move this logic to the table rendering itself. So where you might use the flexRender function. You can wrap it with your tooltip.