Tooltip Customization

The Tooltip provides the option to create the component instance and handlers.

This allows you to place the Tooltip and attach its handlers to the desired location and provides more flexibility.

To use this approach requires to set the component without any children.

import React from 'react';
import ReactDOM from 'react-dom';
import { Tooltip } from '@progress/kendo-react-tooltip';
class App extends React.Component {
    render() {
        let tooltip = null;
        return (
            <div>
                <div>
                    <button className="k-button" title="Tooltip message">I have the browser tooltip</button>
                </div>
                <hr className="k-hr" />
                <div>
                    <button className="k-button">I do not have a tooltip</button>
                </div>
                <hr className="k-hr" />
                <div
                    onMouseOver={event => tooltip && tooltip.handleMouseOver(event)}
                    onMouseLeave={event => tooltip && tooltip.handleMouseLeave(event)}
                >
                    <button className="k-button" title="Tooltip message">I have a KendoReact Tooltip</button>
                </div>
                <hr className="k-hr" />
                <div
                    onMouseOver={event => tooltip && tooltip.handleMouseOver(event)}
                    onMouseLeave={event => tooltip && tooltip.handleMouseLeave(event)}
                >
                    <button className="k-button" title="Tooltip message">I also the same KendoReact Tooltip</button>
                    <Tooltip ref={(el) => tooltip = el} anchorElement="target" position="right" />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <App />, document.querySelector('my-app'));

In this article