Tooltip Migration - Syncfusion® React

This section explains how to migrate the Tooltip component from EJ2 React to React. It provides a detailed comparison of APIs, including props, methods and events.

Properties

EJ2 React	React	Description
Props: `animation` `<TooltipComponent content="Tooltip Content" animation={{ open: { effect: 'ZoomIn', duration: 1000, delay: 0 }}}> Show Tooltip </TooltipComponent>`	Props: `animation` `<Tooltip animation={{ open: { effect: 'FadeZoomIn', duration: 400 }, close: { effect: 'FadeZoomOut', duration: 400 } }}> <button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	Both EJ2 React and React implementations fully support the `animation` prop, allowing for seamless transition effects when tooltips appear and disappear.
Props: `cssClass` `<TooltipComponent cssClass='e-tooltip' content="Tooltip Content" > Show Tooltip </TooltipComponent>`	Props: `className` `<Tooltip className='e-tooltip' > <button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	The `cssClass` prop in EJ2 React is replaced with the standard React `className` prop in React.
Props: `showTipPointer` `<TooltipComponent cssClass='e-tooltip' content="Tooltip Content" showTipPointer={true} > Show Tooltip </TooltipComponent>`	Props: `arrow` `<Tooltip className='e-tooltip' arrow={true} > <button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	The property for controlling tooltip pointer visibility has been renamed from `showTipPointer` in EJ2 React to `arrow` in React, providing the same functionality with a more concise naming convention.
Props: `showTipPointer` `<TooltipComponent cssClass='e-tooltip' showTipPointer={"start"} content="Tooltip Content" showTipPointer={true} > Show Tooltip </TooltipComponent>`	Props: `arrowPosition` `<Tooltip className='e-tooltip' arrow={true} arrowPosition={"start"} > <button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	The property `showTipPointer` from EJ2 React has been renamed to `arrowPosition` in React, providing more descriptive control over tooltip arrow positioning and appearance.
Props: `closeDelay` `<TooltipComponent closeDelay={100} cssClass='e-tooltip' content="Tooltip Content" > Show Tooltip </TooltipComponent>`	Props: `closeDelay` `<Tooltip className='e-tooltip' closeDelay={100} > <button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	Both EJ2 React and React implementations support the `closeDelay` property, allowing users to control the timing before tooltips automatically close after user interaction.
Props: `openDelay` `<TooltipComponent openDelay={100} cssClass='e-tooltip' content="Tooltip Content" > Show Tooltip </TooltipComponent>`	Props: `openDelay` `<Tooltip className='e-tooltip' openDelay={100} > <button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	The `openDelay` prop is supported in both EJ2 React and React.
Props: `open` `<TooltipComponent open={true} cssClass='e-tooltip' content="Tooltip Content" > Show Tooltip </TooltipComponent>`	Props: `open` `<Tooltip className='e-tooltip' open={true} > <button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	The `open` prop is supported in both EJ2 React and React.
Props: `opensOn` `<TooltipComponent opensOn={"Hover"} cssClass='e-tooltip' content="Tooltip Content" > Show Tooltip </TooltipComponent>`	Props: `opensOn` `<Tooltip className='e-tooltip' opensOn={"Hover"} > <button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	The `opensOn` prop is supported in both EJ2 React and React.
Props: `isSticky` `<TooltipComponent isSticky={true} cssClass='e-tooltip' content="Tooltip Content" > Show Tooltip </TooltipComponent>`	Props: `sticky` `<Tooltip className='e-tooltip' sticky={true} > <button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	The property for maintaining tooltip visibility when hovering over it has been renamed from `isSticky` in EJ2 React to `sticky` in React, providing more concise and consistent naming across the component library.
Props: `windowCollision` `<TooltipComponent windowCollision={true} cssClass='e-tooltip' content="Tooltip Content" > Show Tooltip </TooltipComponent>`	Props: `windowCollision` `<Tooltip className='e-tooltip' windowCollision={true} > <button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	The `windowCollision` prop detects and prevents tooltip positioning outside the viewport boundaries, ensuring optimal visibility across both EJ2 React and React implementations.
Props: `content` `<TooltipComponent content="Tooltip Content" > Show Tooltip </TooltipComponent>`	Props: `content` `<Tooltip content="Tooltip Content" > <button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	Both EJ2 React and React implementations fully support the `content` prop, allowing you to define custom tooltip content without any migration changes required.
Props: `offsetX` `<TooltipComponent content="Tooltip Content" offsetX={10} > Show Tooltip </TooltipComponent>`	Props: `offsetX` `<Tooltip content="Tooltip Content" offsetX={10} > <button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	The `offsetX` prop is supported in both EJ2 React and React.
Props: `offsetY` `<TooltipComponent content="Tooltip Content" offsetY={10} > Show Tooltip </TooltipComponent>`	Props: `offsetY` `<Tooltip content="Tooltip Content" offsetY={10} > <button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	The `offsetY` prop is supported in both EJ2 React and React.
Props: `mouseTrail` `<TooltipComponent mouseTrail={true} cssClass='e-tooltip' content="Tooltip Content" > Show Tooltip </TooltipComponent>`	Props: `followCursor` `<Tooltip className='e-tooltip' followCursor={true} > <button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	The `mouseTrail` property in EJ2 React has been renamed to `followCursor` in React.

Methods

EJ2 React	React	Description
Methods: `destroy()` `<TooltipComponent id="tooltip" ref={(scope) => { this.tooltipObj = scope } /> constructor(props: {}) { this.tooltipObj.destroy(); }}`	`useEffect(() => { return () => { console.log('destroyed'); }; }, []); <Tooltip content="Tooltip Content" > button className='sf-btn'>Fade and Zoom</button> </Tooltip>`	The `destroyed` callback event in EJ2 React is not available in React components. Instead, use the cleanup function returned by React `useEffect` hook to execute logic on component unmount.
Methods: `close()` `<TooltipComponent id="tooltip" ref={(scope) => { this.tooltipObj = scope } /> constructor(props: {}) { this.tooltipObj.close(); }}`	Methods: `closeTooltip()` `useEffect(() => { return () => { console.log('destroyed'); }; }, []); <Tooltip content="Tooltip Content" ref={tooltip => this.tooltipInstance = tooltip}> button className='sf-btn' onClick={this.tooltipInstance.closeTooltip()}> Fade and Zoom</button> </Tooltip>`	The `close` method in EJ2 React is replaced with the `closeTooltip` method in React, following React's standard event naming convention
Methods: `refresh()` `<TooltipComponent id="tooltip" ref={(scope) => { this.tooltipObj = scope } /> constructor(props: {}) { this.tooltipObj.refresh(); }}`	Methods: `refresh()` `<Tooltip content="Tooltip Content" ref={tooltip => this.tooltipInstance = tooltip}> button className='sf-btn' onClick={this.tooltipInstance.refresh()}> Fade and Zoom</button> </Tooltip>`	The `refresh` method` is supported in both EJ2 React and React
Methods: `open()` `<TooltipComponent id="tooltip" ref={(scope) => { this.tooltipObj = scope } /> constructor(props: {}) { this.tooltipObj.open(); }}`	Methods: `openTooltip()` `<Tooltip content="Tooltip Content" ref={tooltip => this.tooltipInstance = tooltip}> button className='sf-btn' onClick={this.tooltipInstance.openTooltip()}> Fade and Zoom</button> </Tooltip>`	The `open` method in EJ2 React is replaced with the `openTooltip` method in React, following React's standard event naming convention

Events

EJ2 React	React	Description
Events: `beforeOpen` `<TooltipComponent beforeOpen={handler} > </TooltipComponent >`	Events: `onOpen` `<Tooltip onOpen={handler}> </Tooltip>`	The `beforeOpen` event in EJ2 React is replaced with the `onOpen` event in React, following React's standard event naming convention.
Events: `beforeClose` `<TooltipComponent beforeClose={handler} > </TooltipComponent >`	Events: `onClose` `<Tooltip onClose={handler}> </Tooltip>`	The `beforeClose` event in EJ2 React is replaced with the `onClose` event in React, following React's standard event naming convention.