React-tooltip: button onClick handler doesn't trigger, if the button is inside ReactTooltip Component.

[kokill]

<a ref='settings_tooltip' data-for="settings" data-multiline="true" data-tip data-type="light" href="#">
     <span>Test Link</span>
</a>
<ReactTooltip ref='tooltip_container' id="settings" place="right" effect="solid">
   <div>
       <h5>Title</h5>
       <button onClick={this.handleTooltipClick.bind(this)}>Click</button>
       some content lorem ipsum<br/> some content lorem ipsum
      </div>
</ReactTooltip>

'handleTooltipClick' is not triggering on onclick event.

[megalithic]

@kokill, you'll need to set pointer-events: auto; in your css; as the default styling for the whole reacttooltip container sets pointer-events: none;.

[wwayne]

@kokill, @megalithic is correct, the pointer-events: none as default, you can modify it to, for example:

<a data-tip data-for="settings"></a>
<ReactTooltip id="settings" delayHide={500} class="extra" />

.extra {
 pointer-events: auto !important;
 &:hover {
   visibility: visible !important;
   opacity: 1 !important;
 }
}

Using delayHide here so that you can hover to the tooltip

[mackbrowne]

@wwayne i feel like this should be mentioned in the readme. Perhaps even a prop? and default to false when the prop isn't present