All docs
V20.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Overview

The Tooltip UI component displays a tooltip for a specified element on the page.

View Demo

The following code creates a simple Tooltip on your page and attaches it to another element (in this example, to an image).

jQuery
HTML
JavaScript
<img id="image" src="https://url/to/an/image" />
<div id="tooltipContainer"></div>
$(function() {
    $("#tooltipContainer").dxTooltip({
        target: "#image",
        showEvent: 'dxhoverstart',
        hideEvent: 'dxhoverend',
        contentTemplate: function (contentElement) {
            contentElement.append(
                $("<p />").text("Tooltip content")
            )
        }
    });
});
Angular
HTML
TypeScript
<img id="image" src="https://url/to/an/image" />
<dx-tooltip
    target="#image"
    showEvent="dxhoverstart"
    hideEvent="dxhoverend">
    <div *dxTemplate="let data of 'content'">
        <p>Tooltip content</p>
    </div>
</dx-tooltip>
import { DxTooltipModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTooltipModule
    ],
    // ...
})
Vue
<template>
    <div>
        <img id="image" src="https://url/to/an/image" />
        <DxTooltip
            target="#image"
            show-event="dxhoverstart"
            hide-event="dxhoverend">
            <template>
                <p>Tooltip content</p>
            </template>
        </DxTooltip>
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxTooltip } from 'devextreme-vue/tooltip';

export default {
    components: {
        DxTooltip
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Tooltip } from 'devextreme-react/tooltip';

const renderContent = () => {
    return (
        <p>Tooltip content</p>
    );
}

class App extends React.Component {
    render() {
        return (
            <div>
                <img id="image" src="https://url/to/an/image" />
                <Tooltip
                    target="#image"
                    showEvent="dxhoverstart"
                    hideEvent="dxhoverend"
                    contentRender={renderContent}
                />
            </div>
        );
    }
}

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Tooltip()
    .Target("#image")
    .ShowEvent("dxhoverstart")
    .HideEvent("dxhoverend")
    .ContentTemplate(@<text>
        <p>Tooltip content</p>
    </text>)
)
<img id="image" src="https://url/to/an/image" />
See Also