All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

Tooltip Overview

The Tooltip displays a popup hint for a given html element.

You can define its content either as statically rendered or dynamically loaded text over AJAX.

The Tooltip wrapper for React is a client-side wrapper for the Kendo UI Tooltip widget.

Basic Usage

The following example demonstrates the Tooltip in action.

class TooltipContainer extends React.Component {
    constructor(props) {
        super(props);
        this.content = props.content;
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-2 example-col">
                    <Tooltip content={this.content}>
                        Hover me
                    </Tooltip>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <TooltipContainer content={'Tooltip content'} />,
    document.querySelector('my-app')
);

Features and Functionalities

Events

The following example demonstrates basic Tooltip events. You can subscribe to all Tooltip events by the handler name.

class TooltipContainer extends React.Component {
    constructor(props) {
        super(props);
        this.content = props.content;
    }

    onShow = (e) => {
        console.log("Tooltip is shown");
    }

    onHide = (e) => {
        console.log("Tooltip is hidden");
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-2 example-col">
                    <Tooltip
                        content={this.content}
                        show={this.onShow}
                        hide={this.onHide}>
                        Hover me
                    </Tooltip>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <TooltipContainer content={'Tooltip content'} />,
    document.querySelector('my-app')
);
In this article