Keep Tooltip open, so i can click a button inside the tooltip

[Dmitry Abramov]

Hi! Is it possible to achieve something like this in React?

https://www.syncfusion.com/forums/154240/keep-tooltip-open-so-i-can-click-a-button-inside-the-tooltip

I want to create a custom tooltip with button, and right now, the tooltip that uses 'template' prop is showing on the right side and hides, when I try to hover on it.

[Durga Gopalakrishnan]

Hi Dmitry,

Greetings from Syncfusion.

We have prepared sample to display the button inside the chart tooltip template. Please check with the below snippet and screenshot.

<ChartComponent id='chartcontainer' template: this.tooltipTemplate.bind(this) }}>

</ChartComponent>

 

tooltipTemplate(props) {

        return (<div id="wrap">

                <table style={{ width: '100%', border: '1px solid black' }} className="table-borderless">

                    <tr>

                        <th rowSpan={2} style={{ backgroundColor: '#C1272D' }}>

                        <div><button ejs-button cssClass="e-info" onClick={this.btnClick.bind(this)} >Close</button></div>

                        </th>

                        //…

                    </tr>

                   //…

                </table>

            </div>);

    }

Sample : https://stackblitz.com/edit/react-aktgsu

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Dmitry Abramov]

But you can't press the button in this case. The tooltip will hide on hover.

And if I'm trying to use Spline chart with a trackball, I'm getting this (https://www.syncfusion.com/forums/171844/error-when-i-use-tooltip-template?reply=SfrKL5) error, when I pass string as a template. And this wierd behaviour, if I pass JSX:

https://vimeo.com/760208533

Of course it will be more convinient, if passing custom JSX will be possible, so I can design rich tooltip with react components.

And is it possible to show tooltip on the top of the marker? (like in Vanilla JS demo)

[Durga Gopalakrishnan]

Hi Dmitry,

We have analyzed your queries. Please check with the below suggestions.

#1 : But you can't press the button in this case. The tooltip will hide on hover

By default, chart series tooltip will be displayed only while hovering the marker point and it will be hidden automatically when leaving the marker. Please mention the purpose of using button inside the tooltip template and click operation requirement so that we can analyze further.

# 2: if I'm trying to use Spline chart with a trackball, I'm getting this error, when I pass string as a template

We will include the fix for this issue as per mentioned timeline. We appreciate your patience until then.

# 3 : this wierd behaviour, if I pass JSX

We have prepared sample as per your attached video, tooltip is displayed properly without blinking. Please check with below screenshot and sample.

Sample : https://stackblitz.com/edit/react-f3zwnt

If you are still facing problem, please try to replicate an issue in above sample or share us issue reproduced sample to validate this from our end.

# 4 : is it possible to show tooltip on the top of the marker?

As of now, we don’t have support to position the tooltip in chart.

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.