All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

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