DevExtreme Angular - Customize the Title
The Popover is displayed without a title by default. To add it, set the showTitle option to true and specify the title text using the title option. The title can contain a button that closes the Popover. To enable it, assign true to the showCloseButton option.
- <img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
- <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
- ],
- // ...
- })
If you need to define the title completely, specify a template for it as shown in the following code:
- <img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
- <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
- ],
- // ...
- })
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
If you have technical questions, please create a support ticket in the DevExpress Support Center.