Tooltips

Tooltips can be easily added using the tooltip attribute for a cell

const sheets = [
{
name: 'Sheet 1',
id: 1,
cells: {
1: {
1: {
text: 200.00,
tooltip: 'Hello world'
}
}
}
},
]
fx

Sheet 1

Custom tooltip component

const TooltipComponent = (props: TooltipProps) => {
const {
x = 0,
y = 0,
width = 0,
position = "right",
scrollLeft = 0,
scrollTop = 0,
height = 0,
content,
text
} = props
const posX = position === "right" ? x + width - scrollLeft : x - scrollLeft;
const posY = position === "bottom" ? y + height - scrollTop : y - scrollTop;
return (
<div
style={{
position: "absolute",
left: 0,
top: 0,
transform: `translate(${posX}px, ${posY}px)`,
}}
>
{content} {text}
</div>
)
}
<SpreadSheet autoFocus={false} Tooltip={TooltipComponent} />