How to make recharts custom tooltip to be clickable?

Question

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>
  );
}

Answer 1

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.

Answer 2

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