Free Trial Buy

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
<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>
                <p>Popover content</p>
            </template>
        </DxPopover>
    </div>
</template>

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

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

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

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

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
                    target="#image"
                    showEvent="dxhoverstart"
                    hideEvent="dxhoverend"
                    contentRender={renderContent}
                    shading={true}
                    shadingColor="rgba(0, 0, 0, 0.2)"
                />
            </div>
        );
    }
}

export default App;
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