Anchor Elements

You can target specific anchor elements which will render a tooltip.

To determine which anchor elements will display a tooltip, use the filter callback function. filter accesses the target elements and enables you to filter the anchors based on various criteria such as titles, classes, id, and so on.

The following example demonstrates how to show a tooltip based on the element type.

import React from 'react';
import ReactDOM from 'react-dom';
import { Tooltip } from '@progress/kendo-react-tooltip';
class App extends React.Component {
    filterElements = (element) => {
        if (element.tagName === 'STRONG') {
            return true;
        }
        return false;
    }
    render() {
        return (
            <Tooltip filter={this.filterElements} anchorElement="target">
                <div>
                    <p>
                        In this demo, the
                        <strong title="this is the tooltip">&nbsp;KendoReact Tooltip&nbsp;</strong>
                        will show only when you hover
                        &nbsp;<code>&lt;strong&gt;</code>&nbsp;
                        <strong title="because the 'filter' property is set">
                            elements
                        </strong>.
                    </p>
                    <p>
                        Other elements, like
                        <a href="#" title="Default browser tooltip">&nbsp;this link</a>, will only show the default browser tooltip, even though they have a specified
                        <code>&nbsp;title&nbsp;</code>
                        attribute.
                    </p>
                </div>
            </Tooltip>
        );
    }
}
ReactDOM.render(
    <App/>, document.querySelector('my-app'));

In this article