CODEWITHSUNDEEP
javascriptreactjsrecharts
keerthi c
keerthi c

Reputation: 71

How to make recharts custom tooltip to be clickable?

As i was trying to add link in my custom tooltip of recharts, i can not able to hover on tooltip content it will be hidden automatically, is there any props that i need to override for of recharts to make it clickable?.

Below is my tooltip

  <Tooltip content={(value)=>renderTooltip(value)} />

Below is my renderTooltip which i am using it

const renderTooltip = (props) => {
   if (props.active) {
     return (
       <div >
         <div className="tool-tip">

           <span className="tool-tip-footer">
             {' '}
            <a href="SOME_VALUE_FROM_PROPS">Google</a>
          </span>

      </div>

    </div>
  );
}

Upvotes: 3

Views: 4789

Answers (3)

J&#246;cker
J&#246;cker

Reputation: 6808

Just add wrapperStyle={{ pointerEvents: "auto"}} to the <Tooltip /> component

Upvotes: 1

Deblina Pattanayak
Deblina Pattanayak

Reputation: 1

The Tooltip component calculates internally if the content has to be shown or not, so you don't have to. This might be causing some issues beyond your control.

Upvotes: 0

connorproctor
connorproctor

Reputation: 33

I got this working by doing adding trigger='click' prop and adding a style pointer-events: auto to the parts of the tooltip I wanted to be clickable.

The recharts tooltip wrapper has pointer-events: none which prevented clicking it even after changing the trigger.

Upvotes: 2

Related Questions