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
<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.common.css';
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.common.css';
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
Feedback