Not able to attach custom className passed as props to Tooltip Component

[rupesh-jaiswal]

I have passed className prop to my Tooltip component but i am not able to see the className attached to toolip in browser dom Instead the className gets attached to the element on which we hover Basically i want to change the border color of my tooltip based on the status of my disk(red, green, yellow). Code Snippet:

[membla]

Seems to be by design – although it seems counterintuitive to me:

https://github.com/tvkhoa/react-tippy/issues/3

[tuanthieu2993]

@rupesh-jaiswal have you tried with the suggestion within https://github.com/tvkhoa/react-tippy/issues/3#issuecomment-297688807 ?

[cookpete]

To anyone who stumbles across this in the future – there is a hacky way of adding a class to the tippy-popper element.

Because of this line:

https://github.com/tvkhoa/react-tippy/blob/b2e430ec9a112b313f5744aa879a6ef3d27e838e/src/Tooltip/js/core/createPopperElement.js#L35

You can do this:

<ReactTippy
  html={<div>I have a custom class!</div>}
  size='regular my-custom-class'
/>

Which will add my-custom-class to the tippy-tooltip element. It's abusing the implementation a bit, but it does the job.