Popover
Documentation
The Popover is a widget 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.
jQuery
AngularJS
Angular
Vue
React
ASP.NET MVC
ASP.NET Core
$(function(){
$("#popover1").dxPopover({
target: "#link1",
showEvent: "mouseenter",
hideEvent: "mouseleave",
position: "top",
width: 300
});
$("#popover2").dxPopover({
target: "#link2",
showEvent: "mouseenter",
hideEvent: "mouseleave",
position: "bottom",
width: 300,
showTitle: true,
title: "Details:"
});
$("#popover3").dxPopover({
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
}
}
});
$("#popover4").dxPopover({
target: "#link4",
showEvent: "dxclick",
position: "top",
width: 300,
shading: true,
shadingColor: "rgba(0, 0, 0, 0.5)"
});
});
<!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.1.0/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/18.2.4/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.4/css/dx.light.css" />
<link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/18.2.4/css/dx.android5.light.css" />
<link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/18.2.4/css/dx.ios7.default.css" />
<link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/18.2.4/css/dx.win10.black.css" />
<link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/18.2.4/css/dx.win10.white.css" />
<script src="https://cdn3.devexpress.com/jslib/18.2.4/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">
<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">
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">
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">
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">
The changes in our brochure designs for 2013 require
us to update key areas of our website.
</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;
}