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.

Customize the Title

The Popover is displayed without a title by default. To add it, set the showTitle property to true and specify the title text using the title property. The title can contain a button that closes the Popover. To enable it, assign true to the showCloseButton property.

jQuery
JavaScript
HTML
$(function() {
    $("#popoverContainer").dxPopover({
        target: "#image",
        showEvent: 'dxhoverstart',
        hideEvent: 'dxhoverend',
        title: "Popover Title",
        showTitle: true,
        showCloseButton: true
    });
});
<img id="image" src="https://url/to/an/image" />
<div id="popoverContainer">
    <!-- ... -->
</div>
Angular
HTML
TypeScript
<img id="image" src="https://url/to/an/image" />
<dx-popover
    target="#image"
    showEvent="dxhoverstart"
    hideEvent="dxhoverend"
    title="Popover Title"
    [showTitle]="true"
    [showCloseButton]="true">
    <!-- ... -->
</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
            show-event="dxhoverstart"
            hide-event="dxhoverend"
            :show-title="true"
            :show-close-button="true"
            target="#image"
            title="Popover Title">
            <!-- ... -->
        </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';

class App extends React.Component {
    render() {
        return (
            <div>
                <img id="image" src="https://url/to/an/image" />
                <Popover
                    showTitle={true}
                    showCloseButton={true}
                    target="#image"
                    title="Popover Title"
                    showEvent="dxhoverstart"
                    hideEvent="dxhoverend"
                />
            </div>
        );
    }
}

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Popover()
    .Target("#image")
    .ShowEvent("dxhoverstart")
    .HideEvent("dxhoverend")
    .ContentTemplate(@<text>
        <!-- ... -->
    </text>)
    .Title("Popover Title")
    .ShowTitle(true)
    .ShowCloseButton(true)
)
<img id="image" src="https://url/to/an/image" />

If you need to define the title completely, specify a template for it as shown in the following code:

jQuery
HTML
JavaScript
<img id="image" src="https://url/to/an/image" />
<div id="popoverContainer">
    <p>Popover content</p>
    <div data-options="dxTemplate: { name: 'titleTemplate' }">
        <p>Title template</p>
    </div>
</div>
$(function() {
    $("#popoverContainer").dxPopover({
        target: "#image",
        showEvent: "dxhoverstart",
        hideEvent: "dxhoverend",
        showTitle: true,
        titleTemplate: "titleTemplate"
    });
});
Angular
HTML
TypeScript
<img id="image" src="https://url/to/an/image" />
<dx-popover
    target="#image"
    showEvent="dxhoverstart"
    hideEvent="dxhoverend"
    [showTitle]="true"
    titleTemplate="titleTemplate">
    <div *dxTemplate="let data of 'content'">
        <p>Popover content</p>
    </div>
    <div *dxTemplate="let data of 'titleTemplate'">
        <p>Title template</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
            show-event="dxhoverstart"
            hide-event="dxhoverend"
            :show-title="true"
            target="#image"
            titleTemplate="titleTemplate">
            <template #titleTemplate>
                <p>Title template</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 renderTitle = () => {
    return (
        <p>Title template</p>
    );
}

class App extends React.Component {
    render() {
        return (
            <div>
                <img id="image" src="https://url/to/an/image" />
                <Popover
                    showTitle={true}
                    target="#image"
                    titleRender={renderTitle}
                    showEvent="dxhoverstart"
                    hideEvent="dxhoverend"
                />
            </div>
        );
    }
}

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Popover()
    .Target("#image")
    .ShowEvent("dxhoverstart")
    .HideEvent("dxhoverend")
    .ContentTemplate(@<text>
        <!-- ... -->
    </text>)
    .ShowTitle(true)
    .TitleTemplate(@<text>
        <p>Title template</p>
    </text>)
)
<img id="image" src="https://url/to/an/image" />

You can switch title templates on the fly just as you can do with content templates. Refer to the Switching Templates On the Fly topic for more information.

See Also