Color the Shading of the Background

When the Popover is shown, the area beneath it can be shaded. To enable this behavior, assign true to the shading option. The shading color is specified by the shadingColor option.

jQuery

JavaScript

HTML

$(function() {
    $("#popoverContainer").dxPopover({
        target: "#image",
        showEvent: 'dxhoverstart',
        hideEvent: 'dxhoverend',
        shading: true,
        shadingColor: "rgba(0, 0, 0, 0.2)"
    });
});

<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
<div id="popoverContainer">
    <p>Popover content</p>
</div>

Angular

HTML

TypeScript

<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
<dx-popover
    target="#image"
    showEvent="dxhoverstart"
    hideEvent="dxhoverend"
    [shading]="true"
    shadingColor="rgba(0, 0, 0, 0.2)">
    <div *dxTemplate="let data of 'content'">
        <p>Popover content</p>
    </div>
</dx-popover>

import { DxPopoverModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPopoverModule
    ],
    // ...
})

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().Popover()
    .Target("#image")
    .ShowEvent("dxhoverstart")
    .HideEvent("dxhoverend")
    .ContentTemplate(@<text>
        <p>Popover content</p>
    </text>)
    .Shading(true)
    .ShadingColor("rgba(0, 0, 0, 0.2)")
)
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />

Color the Shading of the Background

jQuery

Angular

ASP.NET MVC Controls

See Also