Can you add HTML to react-tippy tooltip

83 Views Asked by At

I want to add a to a react-tippy tooltip. Is it possible?
I only get it to show [object Object]

Look at title bellow

                    <Tooltip
                        // title={this.renderTicks(idx, row)}
                        title={<div>
                            <h4>Hello</h4>
                            <span>This is a span</span>
                        </div>}
                        position="right"
                        trigger="click"
                        theme="light"
                        arrow="true"
                        arrowSize="big"
                        distance="3"
                        style={{fontSize:14}}
                    >
                        <div>Click Here</div>
                    </Tooltip>
2

There are 2 best solutions below

2
Rolanda On BEST ANSWER

I didn't use it before but reading the documentation said that you can use html props. "Tooltip content. If you don't define html, the title will be used"

Something like this:

<Tooltip
  html={(
    <div>
      <h4>Hello</h4>
      <span>This is a span</span>
    </div>
  )}
>
0
morne On

OK seems easy enough

instead of title just use 'html'

                <Tooltip
                    // title={this.renderTicks(idx, row)}
                    html={<div>
                        <h4>Hello</h4>
                        <span>This is a span</span>
                    </div>}
                    position="right"
                    trigger="click"
                    theme="light"
                    arrow="true"
                    arrowSize="big"
                    distance="3"
                    style={{fontSize:14}}
                >
                    <div>Click Here</div>
                </Tooltip>