JavaScript/jQuery Popover - Resize and Relocate

To change the size of the Popover, specify the height and width properties.

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>

If you need to position the Popover against a certain side of the target element, set the position property.

JavaScript
  • $(function() {
  • $("#popoverContainer").dxPopover({
  • target: "#image",
  • showEvent: 'dxhoverstart',
  • hideEvent: 'dxhoverend',
  • position: "top" // or "bottom" | "left" | "right"
  • });
  • });
See Also