DevExtreme jQuery - Resize and Relocate
To change the size of the Tooltip, specify the height and width options. Note that the Tooltip's arrow takes its share of the overall size.
jQuery
JavaScript
HTML
$(function() { $("#tooltipContainer").dxTooltip({ target: "#image", showEvent: 'dxhoverstart', hideEvent: 'dxhoverend', height: 70, width: 200, contentTemplate: function (contentElement) { contentElement.append( $("<p />").text("Tooltip content") ) } }); });
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" /> <div id="tooltipContainer"></div>
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" [height]="70" [width]="200"> <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>) .Height(70) .Width(200) ) <img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
If you need to position the Tooltip against a certain side of the target element, set the position option.
jQuery
JavaScript
HTML
$(function() { $("#tooltipContainer").dxTooltip({ target: "#image", showEvent: 'dxhoverstart', hideEvent: 'dxhoverend', position: "top", // or "bottom" | "left" | "right" contentTemplate: function (contentElement) { contentElement.append( $("<p />").text("Tooltip content") ) } }); });
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" /> <div id="tooltipContainer"></div>
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" position="top"> <!-- or "bottom" | "left" | "right" --> <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>) .Position(Position.Top) // or Position.Bottom | Position.Left | Position.Right ) <img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
See Also
Feedback