$(() => {
$('#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.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/22.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.1.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;
}