Popover
Documentation
The Popover is a UI component that shows notifications within a box with an arrow pointing to a specified UI element. In this demo, the Popover appears when you pause on the «details» label or click the «more» link.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.defaultOptions = {
target: "#link1",
showEvent: "mouseenter",
hideEvent: "mouseleave",
position: "top",
width: 300,
visible: false
};
$scope.withTitleOptions = {
target: "#link2",
showEvent: "mouseenter",
hideEvent: "mouseleave",
position: "bottom",
width: 300,
showTitle: true,
title: "Details:",
visible: false
};
$scope.withAnimationOptions = {
target: "#link3",
showEvent: "mouseenter",
hideEvent: "mouseleave",
position: "top",
width: 300,
animation: {
show: {
type: "pop",
from: { scale: 0 },
to: { scale: 1 }
},
hide: {
type: "fade",
from: 1,
to: 0
}
},
visible: false
};
$scope.withShadingOptions = {
target: "#link4",
showEvent: "dxclick",
position: "top",
width: 300,
shading: true,
shadingColor: "rgba(0, 0, 0, 0.5)",
visible: false
};
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.6/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div class="dx-fieldset form">
<div class="dx-field">
<div class="dx-field-label">Default mode</div>
<div class="dx-field-value-static">
<p><span id="subject1">Google AdWords Strategy</span>
(<a id="link1">details</a>)</p>
<div id="popover1" dx-popover="defaultOptions">
Make final decision on whether we are going to
increase our Google AdWord spend based
on our 2013 marketing plan.
</div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">With title</div>
<div class="dx-field-value-static">
<p>
<span id="subject2">
Rollout of New Website and Marketing Brochures
</span>
(<a id="link2">details</a>)
</p>
<div id="popover2" dx-popover="withTitleOptions">
The designs for new brochures and
website have been approved.
Launch date is set for Feb 28.
</div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">With animation</div>
<div class="dx-field-value-static">
<p>
<span id="subject3">
Create 2012 Sales Report
</span>
(<a id="link3">details</a>)
</p>
<div id="popover3" dx-popover="withAnimationOptions">
2012 Sales Report has to be completed
so we can determine if major changes
are required to sales strategy.
</div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">With overlay</div>
<div class="dx-field-value-static">
<p>
<span id="subject4">Website Re-Design Plan</span>
(<a id="link4">more</a>)
</p>
<div id="popover4" dx-popover="withShadingOptions">
<div data-options="dxTemplate: { name: 'content' }">
The changes in our brochure designs for 2013 require
us to update key areas of our website.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.form a {
cursor: pointer;
white-space: nowrap;
border-bottom: 1px dashed;
text-decoration: none;
}
.form p {
margin: 0;
}
#link4 {
border-bottom-style: solid;
}