All docs
V20.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

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.common.css';
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.common.css';
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.common.css';
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.common.css';
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