@nivo/bar - Showing tooltip at the top of bars

[ayushkul]

As of now the tooltip can be customized, but right now the tooltip moves around the height of bar. Can we have the tooltip visible at top of the individual bar?

I have looked for the custom bar component as well, but it uses the showTooltip method that always works with the mousemove event.

Requirements in my project are-

1. Showing tooltip at the top of bars
2. By default showing a tooltip for the last bar
3. Need not to hide tooltip for last visited bar

Please let me know if there is any workaround available. Thanks!

Although I tried to achieve the same, but no luck in achieving it perfectly-

const CustomBarComponent = (barProps) => {
    const { x, y, width, height, color, data, showTooltip, borderRadius } = barProps
    
    // By default showing a tooltip for the last bar
    useEffect(() => {
      if (data.index === 59 && props.selectedBarIndex === data.index) {
        showTooltip(<ToolTipElement data={data.data} index={data.index} />, event)
        // Here it needs the event to show tooltip by default at last element
      }
    }, [])

    return (
      <g
        transform={`translate(${x}, ${y})`}
        onMouseEnter={(event) => {
          props.updateBarIndex(data.index)
          showTooltip(<ToolTipElement data={data.data} index={data.index} />, event)
        }}
        onMouseMove={(event): void => showTooltip(<ToolTipElement data={data.data} />, event)}
      >
        <rect width={width} height={height} fill={color} strokeWidth="0" rx={borderRadius} />
      </g>
    )
  }

In the above code not doing anything on mouseleave event, hence the tooltip for last visited bar stay visible.