Vue Popover - Specify Toolbar Items
The Popover has two toolbars: top and bottom. Items on these toolbars can be plain text or UI components. To configure the items, populate the toolbarItems array with objects. Each object configures an individual toolbar item. For example, the following code adds two toolbar items to the Popover: one is plain text, another is the Button UI component. They both occupy the top toolbar, because their toolbar property assumes its default value.
jQuery
$(function() { $("#popoverContainer").dxPopover({ target: "#image", showEvent: 'dxhoverstart', hideEvent: 'dxhoverend', width: 200, toolbarItems: [{ text: "Title", location: "before" }, { widget: "dxButton", location: "after", options: { text: "Refresh", onClick: function() { // ... } } }] }); });
<img id="image" src="https://url/to/an/image" /> <div id="popoverContainer"> <p>Popover content</p> </div>
Angular
<img id="image" src="https://url/to/an/image" /> <dx-popover target="#image" showEvent="dxhoverstart" hideEvent="dxhoverend" [width]="200"> <div *dxTemplate="let data of 'content'"> <p>Popover content</p> </div> <dxi-popover-toolbar-item text="Title" location="before"> </dxi-popover-toolbar-item> <dxi-popover-toolbar-item widget="dxButton" location="after" [options]="{ text: 'Refresh', onClick: refresh }"> </dxi-popover-toolbar-item> </dx-popover>
import { DxPopoverModule, DxButtonModule } from "devextreme-angular"; // ... export class AppComponent { refresh () { // ... } } @NgModule({ imports: [ // ... DxPopoverModule, DxButtonModule ], // ... })
Vue
<template> <div> <img id="image" src="https://url/to/an/image" /> <DxPopover :width="200" target="#image" show-event="dxhoverstart" hide-event="dxhoverend"> <template> <p>Popover content</p> </template> <DxToolbarItem text="Title" location="before" /> <DxToolbarItem :options="buttonOptions" widget="dxButton" location="after" /> </DxPopover> </div> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxPopover, DxToolbarItem } from 'devextreme-vue/popover'; export default { components: { DxPopover, DxToolbarItem }, data() { return { buttonOptions: { text: 'Refresh', onClick: function() { // ... } } }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Popover, ToolbarItem } from 'devextreme-react/popover'; const buttonOptions = { text: 'Refresh', onClick: function() { // ... } }; 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 width={200} target="#image" showEvent="dxhoverstart" hideEvent="dxhoverend" contentRender={renderContent}> <ToolbarItem text="Title" location="before" /> <ToolbarItem options={buttonOptions} widget="dxButton" location="after" /> </Popover> </div> ); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().Popover() .Target("#image") .ShowEvent("dxhoverstart") .HideEvent("dxhoverend") .ContentTemplate(@<text> <p>Popover content</p> </text>) .ToolbarItems(ti => { ti.Add() .Text("Title") .Location(ToolbarItemLocation.Before); ti.Add() .Widget(w => w.Button() .Text("Refresh") .OnClick("refresh")) .Location(ToolbarItemLocation.After); } ) <img id="image" src="https://url/to/an/image" /> <script type="text/javascript"> function refresh() { // ... } </script>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.