Custom Tooltip opacity always 1

I need to have custom Tooltip and I design a react-component using hooks, check out the code:

import {Line} from "react-chartjs-2";
import {Button} from "reactstrap";
import React, {useState, useRef} from "react";
// noinspection ES6UnusedImports
// eslint-disable-next-line no-unused-vars
// import Drag from "../DraggableChart";

export default function ProgramChart({data}) {
    const [tooltipData, setTooltipData] = useState(null);
    const chartRef = useRef(null);
    return (
        <div>
            <Line
                ref={chartRef}
                options={{
                    legend: {
                        display: false
                    },
                        tooltips: {
                        "enabled": false,
                        "mode": "point",
                        "intersect": false,
                        custom: (tooltipModel) => {
                            // hide tooltip if needed
                            if (tooltipModel.opacity === 0) {
                                setTooltipData(null);
                                console.log("Hide tooltip");
                                return;
                            }
                            const chart = chartRef.current.chartInstance;
                            const canvas = chart.ctx.canvas;

                            if (canvas) {
                                const position = canvas.getBoundingClientRect();
                               
                                // set position of tooltip
                                const left = position.left + tooltipModel.caretX;
                                const top = position.top + tooltipModel.caretY;

                                setTooltipData({top, left});
                            }
                        }
                    },
                 }}
                data={chartData}
                style={{
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    textAlign: "center",
                    flex: 1,
                    height: "100%",
                }}/>
            {tooltipData ? <GraphTooltip data={tooltipData}/> : <div/>}
        </div>
    );
};

const GraphTooltip = ({data}) => <div
    style={{
        padding: 20,
        position: "fixed",
        border: "1px solid",
        borderColor: "#fff8f9",
        backgroundColor: "rgba(53,53,53,0.81)",
        borderRadius: 4,
        top: data.top,
        left: data.left,
    }}
>
    <Button>Whatever</Button>
</div>;

Tooltip is rendered but it never disappear!

If I remove setTooltipData({top, left}); line than there are no problem…

Have anyone any idea?

[wongJonathan]

I decided to take it out due to having issues creating my own that looked nice but I found what I used that worked.

const customTooltip = useCallback((tooltipModel: any) => {
    // if chart is not defined, return early
    let chart = chartRef.current;
    if (!chart) {
      return;
    }

    // hide the tooltip when chartjs determines you've hovered out
    if (tooltipModel.opacity === 0) {
      setOpenToolTip(false);
      return;
    }

    const position = chart.chartInstance.canvas.getBoundingClientRect();

    // assuming your tooltip is `position: fixed`
    // set position of tooltip
    const left = position.left + tooltipModel.caretX;
    const top = position.top - tooltipModel.height;

    // set values for display of data in the tooltip
    const label = tooltipModel.dataPoints[0].xLabel;
    const index = tooltipModel.dataPoints[0].index;

    setPositionAndData({top, left, label, index});
    setOpenToolTip(true);
  }, []);

And then I called it in the options:

tooltips: {
            enabled: false,
            custom: customTooltip,
          }

From what I remember, not defining the customTooltip with a useCallback gave the error where opacity did not change. Hope it helps!

[PCPbiscuit]

None of you guys have a problem where hovering while using a custom tooltip rerenders the chart itself?

@PCPbiscuit I’m facing same issue, did you find any workaround ?

The only workaround which works for me is using test-react-chartjs2