Templates

You can provide a custom rendering for the content of the Tooltip.

By default, the Tooltip shows the title attribute value of the anchor element. To customize the default content, set the content property of the Tooltip. content can accept a JSX element or another component and the title property of the anchor element will be received as props.

import React from 'react';
import ReactDOM from 'react-dom';
import { Tooltip } from '@progress/kendo-react-tooltip';

class TooltipContentTemplate extends React.Component {
    render() {
        return (
            <a> A template for: <strong>{this.props.title}</strong></a>
        );
    }
}

class App extends React.Component {
    render() {
        return (
            <Tooltip content={ (props) => <TooltipContentTemplate title={props.title}/> } anchorElement="target" position="bottom" >
                <p>
                    <strong>Wikipedia</strong> is a multilingual,
                    &nbsp;<a title="https://en.wikipedia.org/wiki/Web_application" href="https://en.wikipedia.org/wiki/Web_application">web-based</a>,
                    &nbsp;<a title="https://en.wikipedia.org/wiki/Free_content" href="https://en.wikipedia.org/wiki/Free_content">free-content</a>
                    &nbsp;<a title="https://en.wikipedia.org/wiki/Encyclopedia" href="https://en.wikipedia.org/wiki/Encyclopedia">encyclopedia</a>
                    &nbsp;project supported by the
                    &nbsp;<a title="https://en.wikipedia.org/wiki/Wikimedia_Foundation" href="https://en.wikipedia.org/wiki/Wikimedia_Foundation">Wikimedia Foundation&nbsp;</a>
                    and based on a model of openly editable content.
                    Wikipedia is the largest and most popular general
                    &nbsp;<a title="https://en.wikipedia.org/wiki/Reference_work" href="https://en.wikipedia.org/wiki/Reference_work">reference work</a>
                    &nbsp;on the Internet, and is named as one of the most popular websites.
                </p>

                <p>
                    - From the Wikipedia article
                    &nbsp;on <a title="https://en.wikipedia.org/" href="https://en.wikipedia.org/">Wikipedia</a>
                </p>
            </Tooltip>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app'));

In this article