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.
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.
<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;
}