React-tooltip: Trying to add clickable links to a tooltip

Created on 21 Nov 2016 · 1Comment · Source: wwayne/react-tooltip

There was an issue a while back about adding anchor tags to the content in a Tooltip. It mostly works except that there is a css rule on the rendered tooltip which causes all pointer events to be omitted, thereby not allowing clicking of anything inside any tooltip.

The exact rule is

.__react_component_tooltip {
    pointer-events: none;
}

Is there a way to manually turn this off? What is its purpose exactly and could we do without it?

Source

zekedroid

👍3

Most helpful comment

You can check the demo page in Theme and delay

<a data-tip='hover on me will keep the tootlip'>(･ω´･ )́)</a>
<ReactTooltip class='extraClass' delayHide={1000} effect='solid'/>
.extraClass {
  font-size: 20px !important;
  pointer-events: auto !important;
  &:hover {
     visibility: visible !important;
     opacity: 1 !important;
  }
}

I have to admit that the solution is super ugly, I will try to add a new option to support this in the future.

wwayne on 23 Nov 2016

👍3

>All comments

You can check the demo page in Theme and delay

<a data-tip='hover on me will keep the tootlip'>(･ω´･ )́)</a>
<ReactTooltip class='extraClass' delayHide={1000} effect='solid'/>
.extraClass {
  font-size: 20px !important;
  pointer-events: auto !important;
  &:hover {
     visibility: visible !important;
     opacity: 1 !important;
  }
}

I have to admit that the solution is super ugly, I will try to add a new option to support this in the future.

wwayne on 23 Nov 2016

👍3

Was this page helpful?

0 / 5 - 0 ratings