We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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.


3 Replies

DG Durga Gopalakrishnan Syncfusion Team October 13, 2022 09:51 AM

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.



DA Dmitry Abramov October 14, 2022 11:32 AM

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)



DG Durga Gopalakrishnan Syncfusion Team October 17, 2022 07:31 AM

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.


Loader.
Live Chat Icon For mobile
Up arrow icon