Use Tooltip.js to render React Components

Question

I trying to use this awesome tooltip library Popper.js

I want to use the above tooltip utility to render React Components into it. Right now, my understanding is that I can only give static html to the tooltip using title property and html set to true in the config object. I tried ReactDOMServer.renderToString but that is again creating a static markup with no lifecycle hooks or any of the React goodness. Is there any way I can inject React Components into the tooltip? Or can you please suggest some other library like this that supports flip behaviour on viewport boundaries?

PS: I don't want to use Popper.js or react-popper as I want the trigger functionality to work out of the box.

score 1 · Answer 1 · answered Jul 11 '18 at 13:37

1

On tooltip initializing you can pass a boolean prop defining your title as an HTML

new Tooltip(reference, {html: true, title: "<div>This is a component</div>"})

See tooltip documentation

answered Jul 11 '18 at 13:37

Jorgedl

137
3

I have already mentioned that I have tried it. This will render static html to the tooltip, not a React Component. – mohsinulhaq Jul 11 '18 at 13:56
How to import Tooltip in the js file? – Kusal Kithmal Apr 16 '19 at 06:35

score -1 · Accepted Answer · answered Aug 02 '18 at 06:28

-1

I ended up using react-popper package.

answered Aug 02 '18 at 06:28

mohsinulhaq

1,059
1
18
31

Use Tooltip.js to render React Components

2 Answers2