JavaScript/jQuery Popover - 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.

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>

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

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"
  • });
  • });

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