JavaScript/jQuery Popover - 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 property. The shading color is specified by the shadingColor property.

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://url/to/an/image" />
<div id="popoverContainer">
    <p>Popover content</p>
</div>
Angular
HTML
TypeScript
<img id="image" src="https://url/to/an/image" />
<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
    ],
    // ...
})
Vue
Code
<template>
    <div>
        <img id="image" src="https://url/to/an/image" />
        <DxPopover 
            target="#image"
            show-event="dxhoverstart"
            hide-event="dxhoverend"
            :shading="true"
            shadingColor="rgba(0, 0, 0, 0.2)">
            <template #content>
                <p>Popover content</p>
            </template>
        </DxPopover>
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { DxPopover } from 'devextreme-vue/popover';

export default {
    components: {
        DxPopover
    }
}
</script>
React
Code
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { Popover } from 'devextreme-react/popover';

const renderContent = () => {
    return (
        <p>Popover content</p>
    );
};

export default function App() {
    return (
        <div>
            <img id="image" src="https://url/to/an/image" />
            <Popover
                target="#image"
                showEvent="dxhoverstart"
                hideEvent="dxhoverend"
                contentRender={renderContent}
                shading={true}
                shadingColor="rgba(0, 0, 0, 0.2)"
            />
        </div>
    );
}
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://url/to/an/image" />
See Also