DevExtreme jQuery/JS - Overview
The Tooltip widget displays a tooltip for a specified element on the page.
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
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Tooltip - Show and Hide
- Tooltip - Customize the Content
- Tooltip - Resize and Relocate
- Tooltip API Reference
Feedback