Customization

The Tooltip enables you to place the Tooltip in a specific location and attach its handlers there.

In order for this implementation to properly work, do not set children to the component.

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