Vue Popover - Resize and Relocate
To change the size of the Popover, specify the height and width properties.
jQuery
JavaScript
HTML
$(function() { $("#popoverContainer").dxPopover({ target: "#image", showEvent: 'dxhoverstart', hideEvent: 'dxhoverend', height: 300, width: 500 }); });
<img id="image" src="https://url/to/an/image" /> <div id="popoverContainer"> <p>Popover content</p> </div>
Angular
HTML
TypeScript
<img id="image" src="https://url/to/an/image" /> <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 ], // ... })
Vue
<template> <div> <img id="image" src="https://url/to/an/image" /> <DxPopover target="#image" show-event="dxhoverstart" hide-event="dxhoverend" :height="300" :width="500"> <template> <p>Popover content</p> </template> </DxPopover> </div> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxPopover } from 'devextreme-vue/popover'; export default { components: { DxPopover } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Popover } from 'devextreme-react/popover'; const renderContent = () => { return ( <p>Popover content</p> ); }; class App extends React.Component { render() { return ( <div> <img id="image" src="https://url/to/an/image" /> <Popover target="#image" showEvent="dxhoverstart" hideEvent="dxhoverend" height={300} width={500} contentRender={renderContent} /> </div> ); } } export default App;
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://url/to/an/image" />
If you need to position the Popover against a certain side of the target element, set the position property.
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://url/to/an/image" /> <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 ], // ... })
Vue
<template> <div> <img id="image" src="https://url/to/an/image" /> <DxPopover target="#image" show-event="dxhoverstart" hide-event="dxhoverend" position="top"> <!-- or "bottom" | "left" | "right" --> <template> <p>Popover content</p> </template> </DxPopover> </div> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxPopover } from 'devextreme-vue/popover'; export default { components: { DxPopover } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Popover } from 'devextreme-react/popover'; const renderContent = () => { return ( <p>Popover content</p> ); }; class App extends React.Component { render() { return ( <div> <img id="image" src="https://url/to/an/image" /> <Popover target="#image" showEvent="dxhoverstart" hideEvent="dxhoverend" contentRender={renderContent} position="top"/> {/* or "bottom" | "left" | "right" */} </div> ); } } export default App;
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://url/to/an/image" />
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.