All docs
V19.1
24.2
The page you are viewing does not exist in version 24.2.
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery/JS - Overview

The Tooltip widget 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://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
<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://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
<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
    ],
    // ...
})
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://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
See Also