Controlled Mode

By default, the Tooltip is in an uncontrolled state and is displayed as the built-in browser Tooltip on mouseover.

The KendoReact Tooltip provides options for you to show it programmatically by using the open and the targetElement properties.

The following example demonstrates how to show and hide the Tooltip programmatically.

import React from 'react';
import ReactDOM from 'react-dom';
import { Tooltip } from '@progress/kendo-react-tooltip';
class App extends React.Component {
    state = {
        open: false,
        targetElement: null
    }

    showTooltip = (element) => {
        this.setState({
            open: true,
            targetElement: element
        })
    }
    render() {
        return (
            <Tooltip filter={this.filterElements} anchorElement="target" open={this.state.open} targetElement={this.state.targetElement} openDelay={1}>
                <div>
                    <p>
                        Click the button to show the tooltip with&nbsp;
                        <a ref={el => this.firstElement = el} href="http://example.com/first" title="http://example.com/first">first link</a>&nbsp;
                        as an anchor.
                        <button className='k-button' onClick={() => this.showTooltip(this.firstElement)}>Show Tooltip</button>
                    </p>
                    <p>
                        Click the button to show the tooltip with&nbsp;
                        <a ref={el => this.secondElement = el} href="http://example.com/second" title="http://example.com/second">second link</a>&nbsp;
                        as an anchor.
                        <button className='k-button' onClick={() => this.showTooltip(this.secondElement)}>Show Tooltip</button>
                    </p>
                    <hr/>
                    <button className='k-button' onClick={()=> this.setState({open: false, targetElement: undefined})}>Hide Tooltip</button>
                </div>
            </Tooltip>
        );
    }
}
ReactDOM.render(
    <App />, document.querySelector('my-app'));
In this article
 /