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

Main Properties

The Tooltip provides configuration options for setting its main properties.

The available configurations allow you to set its:

  • Content
  • Position—In relation to the target of the Tooltip: left, right, top, or bottom.
  • Showing and hiding behavior
  • Dimensions
class TooltipContainer extends React.Component {
    constructor(props) {
        super(props);
        this.position = props.position;
        this.height = props.height;
        this.showOn = props.showOn;
        this.autoHide = props.autoHide;
        this.content = props.content;
        this.width = props.width;
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-2 example-col">
                    <Tooltip
                        position={this.position}
                        height={this.height}
                        showOn={this.showOn}
                        autoHide={this.autoHide}
                        content={this.content}
                        width={this.width}>
                        Click me
                    </Tooltip>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <TooltipContainer position={'right'} height={'300px'} showOn={'click'} autoHide={true} content={'Tooltip content'} width={'500px'} />,
    document.querySelector('my-app')
);
In this article