question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature Request - Programatically show/hide tooltip

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:67
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

15reactions
VictoriaGribkovacommented, Feb 13, 2019

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.

12reactions
MatiasCScommented, Aug 7, 2019

I need this too!😢

Read more comments on GitHub >

github_iconTop Results From Across the Web

Show/Hide ToolTip Programatically
How can I set the tooltip to show/hide programmatically? right not it only supports hover or click show action.
Read more >
Show / Hide Tooltips programmatically. - DevExpress Support
I have created and Option Menu in this way: <para>barManager = new BarManager(); popUpMenu = new PopupMenu(); popUpMenu.
Read more >
Series bullet tooltip - programmatically show / hide · Issue #2753
Having some internal logic I determine what series bullets tooltips I have to show when I hover any of them (or legend using...
Read more >
How to show or hide the tooltip dynamically in Flutter ...
In this article, we described how to show or hide the tooltip dynamically in Flutter Cartesian charts. Flutter Cartesian chart widget provides support...
Read more >
4 Ways to Show Tooltips in React with react-tooltip, Material UI ...
All the libraries we're going to review provide great tooltip components. With all options, we can add a tooltip, define content for it, ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found