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

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

• javascript
• reactjs
• recharts

• For latest version of recharts they have added new prop called trigger, when we pass trigger as click then it will be clickable, by default it will be hover. – keerthi c Commented Apr 1, 2022 at 16:47
• where is the prop trigger in the docs; I was referring to this page recharts/en-US/api/Tooltip – user19251203 Commented Jul 12, 2022 at 20:26
• 1 @user19251203 they havent updated docs yet. – keerthi c Commented Jul 20, 2022 at 17:26

4 Answers 4

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.

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

The Tooltip ponent 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.

 <Tooltip
      active={true}
      wrapperStyle={{ pointerEvents: 'auto' }}
      content={content}
 />

Set the active prop active to true. That's what worked me.