Feature Request - Programatically show/hide tooltip

[sospirited]

Do you want to request a feature or report a bug?

Feature.

What is the current behavior?

The available callbacks for a chart (e.g. LineChart), are:

For tooltips to appear, the user hovers on the chart component with it's child <Tooltip> component and internal callbacks are fired to set the <Tooltip> prop to active and provide it with props for the payload, which it uses to style and display the hover tooltip.

To my knowledge, this is the only way to make tooltips appear, via user interaction with the chart.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/ndLhnegs/).

What is the expected behavior?

As this is a feature request, I will express the desired behaviour.

I would like a way to programatically display the tooltip on my chart. E.g. triggered via a callback on another parent component of the <Chart> component), where I provide dataset key I want the tooltip to display information for.

For example, if we look at the SimpleLineChart - http://recharts.org/#/en-US/examples/SimpleLineChart

I would like to be able to call something like showTooltip('Page D'), on the <LineChart> to programatically make my tooltip appear.

The 'why' factor

This way, if I have other components showing relevant contextual info relating to Page D on another component, when the user interacts/hovers on THAT component, I can fire this new callback to show the tooltip on the chart at the same time, providing a better user experience.

It need not get in the way of lifecycle events as user's mouse interaction with the chart can still go through it's normal events and ultimately be hidden once the user's mouse leaves the chart again.

In summary, I would like to request API methods on the charts for: showTooltip() hideTooltip()

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

latest

[knowbody]

is there a plan on making this happen?

[VictoriaGribkova]

I face with this issue too. I want to show the tooltip if item is focused. This is necessary for better accessibility. But there is no feature to programmatically show and hide the tooltip.

[luisgurmendez]

What happens if you control the active prop yourself?

Just tryed to do this, and it seems that the Tooltip overrides the active prop.. So what I thought was to create a CustomTooltip and pass it through the content prop of the Tooltip

<Tooltip content={<CustomTooltip customActive={active} />} />

import DefaultTooltipContent from 'recharts/lib/component/DefaultTooltipContent';
.
.
.

interface CustomTooltipProps extends TooltipProps{
    customActive: boolean;
}

const CustomTooltip: React.FC<CustomTooltipProps> =({customActive, ...rest}) => {
  if(!customActive){
      return null
   }
  return <DefaultTooltipContent {...rest} />;
}

And if needed :

declare module 'recharts/lib/component/DefaultTooltipContent' {
    import React from 'react';
    import { TooltipProps } from 'recharts';

    declare const DefaultTooltipContent: React.ComponentType<TooltipProps>;

    export default DefaultTooltipContent;
}

[MatiasCS]

I need this too!😢

[nasmithan]

I was able to solve this by passing a component and some css. When the "recharts-tooltip-wrapper" div is empty (label === 'IGNORE'), I set display to none. Here's a simple version of what I'm doing: Recharts tooltip:

<Tooltip
  content={<CustomTooltip />}
/>

Custom content component:

export function CustomTooltip({
  payload,
}) {
  if (payload.length === 0 || payload[0].payload.label === 'IGNORE') return null;
  return payload[0].payload.label;
}

CSS:

'.recharts-tooltip-wrapper:empty': {
  display: 'none',
}

[rashmimh]

I was able to solve this by passing a component and some css. When the "recharts-tooltip-wrapper" div is empty (label === 'IGNORE'), I set display to none. Here's a simple version of what I'm doing: Recharts tooltip:

<Tooltip
  content={<CustomTooltip />}
/>

Custom content component:

export function CustomTooltip({
  payload,
}) {
  if (payload.length === 0 || payload[0].payload.label === 'IGNORE') return null;
  return payload[0].payload.label;
}

CSS:

'.recharts-tooltip-wrapper:empty': {
  display: 'none',
}

Many many thanks to you.

[calvinx408]

I was able to solve this by using onMouseEnter/onMouseLeave per each div chart and just passing state to the customtooltip

[DmitriyKochergin]

After digging sources I was able to programmatically hide tooltip by hacking the state of BarChart component via ref. It was needed to hide tooltips on mobile devices when device orientation changes.

barChartRef = React.createRef(); ... <BarChart ref={this.barChartRef} ...

this.barChartRef.current.setState({isTooltipActive: false});

...

[corysimmons]

We could do so much stuff if index and activeIndex (hovered or clicked) was just added to everything. indexes are on a random handful of things in Recharts. :(

[DarthVitalus]

thanks to @DmitriyKochergin ! with little trick, we can achieve expected behavior ;) https://codesandbox.io/s/recharts-programmatically-show-tooltip-bhfnwt?file=/src/App.tsx

[ckifer]

Eh definitely not "officially" supported. But we'll try our best not to break anything outside of a major version bump

[mgifford]

A tooltip to build on that's quite accessible is: https://designsystem.digital.gov/components/tooltip/

or for that matter: https://getbootstrap.com/docs/4.1/components/tooltips/

[NereonNeo]

thanks to @DmitriyKochergin ! with little trick, we can achieve expected behavior ;) https://codesandbox.io/s/recharts-programmatically-show-tooltip-bhfnwt?file=/src/App.tsx

Thank you for codesanbox example, thanks so mach