Multiple Tooltips

You can display multiple Tooltips on the same page.

Depending on their position and the available area around them, the tooltips can accept various configuration options.

import React from 'react';
import ReactDOM from 'react-dom';
import { Tooltip } from '@progress/kendo-react-tooltip';
class App extends React.Component {
    render() {
        return (
            <div>
                <Tooltip openDelay={100} position="right" anchorElement="target">
                    <div style={{ textAlign: 'center' }}>
                        <span title="This is with position right">
                            This is the first Tooltip with position right.
                        </span>
                    </div>
                </Tooltip>
                <br/>
                <Tooltip openDelay={100} position="left" anchorElement="target">
                    <div style={{ textAlign: 'center' }}>
                        <span title="This is with position left">
                            This is the second Tooltip with position left.
                        </span>
                    </div>
                </Tooltip>
            </div>
        );
    }
}
ReactDOM.render(
    <App/>, document.querySelector('my-app'));

In this article