Vue Popover - Resize and Relocate
To change the size of the Popover, specify the height and width properties.
- <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 #content>
- <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>
If you need to position the Popover against a certain side of the target element, set the position property.
- <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 #content>
- <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>
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.