Positioning

By default, the position of the Tooltip is determined by the available space around it.

To set a specific position for the Tooltip, set its position property.

The following example demonstrates how to apply different Tooltip positions.

import React from 'react';
import ReactDOM from 'react-dom';
import { Tooltip } from '@progress/kendo-react-tooltip';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            position: "top",
            anchor: "target"
        };
    }
    onPositionChange = ( event ) => {
        if (event.target.id !== "default") {
            this.setState({
                position: event.target.id
            });
        } else {
            this.setState({
                position: undefined
            });
        }
    }
    onAnchorChange = ( event ) => {
        if (event.target.id === "target") {
            this.setState({
                anchor: "target"
            });
        } else if (event.target.id === "pointer") {
            this.setState({
                anchor: "pointer"
            });
        }
    }
    render() {

        return (
            <Tooltip position={this.state.position} anchorElement={this.state.anchor}>
                <div className="k-form">
                    <fieldset>
                        <legend>Change position</legend>
                        <input type="radio" name="position" id="default" className="k-radio" onChange={this.onPositionChange}/>
                        <label className="k-radio-label" for="default">Default</label>

                        <input type="radio" name="position" id="top" className="k-radio" onChange={this.onPositionChange}/>
                        <label className="k-radio-label" for="top">Top</label>

                        <input type="radio" name="position" className="k-radio" id="bottom" onChange={this.onPositionChange}/>
                        <label className="k-radio-label" for="bottom">Bottom</label>

                        <input type="radio" name="position" id="left" className="k-radio" onChange={this.onPositionChange}/>
                        <label className="k-radio-label" for="left">Left</label>

                        <input type="radio" name="position" className="k-radio" id="right" onChange={this.onPositionChange}/>
                        <label className="k-radio-label" for="right">Right</label>
                    </fieldset>
                </div>
                <div className="k-form">
                    <fieldset>
                        <legend>Change anchor</legend>
                        <input type="radio" name="anchor" id="target" className="k-radio" onChange={this.onAnchorChange}/>
                        <label className="k-radio-label" for="target">Target</label>

                        <input type="radio" name="anchor" id="pointer" className="k-radio" onChange={this.onAnchorChange}/>
                        <label className="k-radio-label" for="pointer">Pointer</label>
                    </fieldset>
                </div>
                <div style={{ textAlign: 'center', paddingTop: "100px" }}><button title="some title" className="k-button">Hover me</button></div>
              </Tooltip>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app'));

In this article