Your search did not match any results.



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.

Backend API
<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> @(Html.DevExtreme().Popover() .Target("#link1") .ShowEvent("mouseenter") .HideEvent("mouseleave") .Position(Position.Top) .Width(300) .ContentTemplate(@<text> Make final decision on whether we are going to increase our Google AdWord spend based on our 2013 marketing plan. </text>) ) </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> @(Html.DevExtreme().Popover() .Target("#link2") .ShowEvent("mouseenter") .HideEvent("mouseleave") .Position(Position.Bottom) .Width(300) .ShowTitle(true) .Title("Details:") .ContentTemplate(@<text> The designs for new brochures and website have been approved. Launch date is set for Feb 28. </text>) ) </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> @(Html.DevExtreme().Popover() .Target("#link3") .ShowEvent("mouseenter") .HideEvent("mouseleave") .Position(Position.Top) .Width(300) .Animation(a => a .Show(s => s .Type(AnimationType.Pop) .From(new { scale = 0 }) .To(new { scale = 1 }) ) .Hide(h => h .Type(AnimationType.Fade) .From(1) .To(0) ) ) .ContentTemplate(@<text> 2012 Sales Report has to be completed so we can determine if major changes are required to sales strategy. </text>) ) </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> @(Html.DevExtreme().Popover() .Target("#link4") .ShowEvent("dxclick") .Position(Position.Top) .Width(300) .Shading(true) .ShadingColor("rgba(0, 0, 0, 0.5)") .ContentTemplate(@<text> The changes in our brochure designs for 2013 require us to update key areas of our website. </text>) ) </div> </div> </div>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class PopoverController : Controller { public ActionResult Overview() { return View(); } } }
.form a { cursor: pointer; white-space: nowrap; border-bottom: 1px dashed; text-decoration: none; } .form p { margin: 0; } #link4 { border-bottom-style: solid; }