DevExtreme React - Resize and Relocate
To change the size of the Popover, specify the height and width options.
jQuery
JavaScript
HTML
$(function() { $("#popoverContainer").dxPopover({ target: "#image", showEvent: 'dxhoverstart', hideEvent: 'dxhoverend', height: 300, width: 500 }); });
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" /> <div id="popoverContainer"> <p>Popover content</p> </div>
Angular
HTML
TypeScript
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" /> <dx-popover target="#image" showEvent="dxhoverstart" hideEvent="dxhoverend" [height]="300" [width]="500"> <div *dxTemplate="let data of 'content'"> <p>Popover content</p> </div> </dx-popover>
import { DxPopoverModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPopoverModule ], // ... })
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Popover() .Target("#image") .ShowEvent("dxhoverstart") .HideEvent("dxhoverend") .ContentTemplate(@<text> <p>Popover content</p> </text>) .Height(300) .Width(500) ) <img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
If you need to position the Popover against a certain side of the target element, set the position option.
jQuery
JavaScript
$(function() { $("#popoverContainer").dxPopover({ target: "#image", showEvent: 'dxhoverstart', hideEvent: 'dxhoverend', position: "top" // or "bottom" | "left" | "right" }); });
Angular
HTML
TypeScript
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" /> <dx-popover target="#image" showEvent="dxhoverstart" hideEvent="dxhoverend" position="top"> <!-- or "bottom" | "left" | "right" --> <div *dxTemplate="let data of 'content'"> <p>Popover content</p> </div> </dx-popover>
import { DxPopoverModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPopoverModule ], // ... })
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Popover() .Target("#image") .ShowEvent("dxhoverstart") .HideEvent("dxhoverend") .ContentTemplate(@<text> <p>Popover 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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.