Your search did not match any results.
Tooltip

Overview

Documentation
The Tooltip widget displays a tooltip for a specified element on the page. This demo shows how you can customize the tooltip and animate its appearance on the page.
<div class="form"> <div class="label">Default mode</div> <div> <img id="product1" src="~/images/ProductsLarge/17.png"> @(Html.DevExtreme().Tooltip() .Target("#product1") .ShowEvent("mouseenter") .HideEvent("mouseleave") .ContentTemplate("ExcelRemote IR") ) </div> <div class="label">With template</div> <div> <img id="product2" src="~/images/ProductsLarge/3.png"> @(Html.DevExtreme().Tooltip() .Target("#product2") .ShowEvent("mouseenter") .HideEvent("mouseleave") .Position(Position.Right) .ContentTemplate(@<text> <img width="150" src="~/images/ProductsLarge/3.png"> <br /> <b>SuperPlasma 50</b> <br /> 2400$ </text>) ) </div> <div class="label">With animation</div> <div> <img id="product3" src="~/images/ProductsLarge/15.png"> @(Html.DevExtreme().Tooltip() .ContentTemplate("Projector PlusHD") .Target("#product3") .ShowEvent("mouseenter") .HideEvent("mouseleave") .Position(Position.Top) .Animation(a => a .Show(s => s .Type(AnimationType.Slide) .From(new { top = -100, opacity = 0 }) .To(new { top = 0, opacity = 1 }) ) .Hide(h => h .Type(AnimationType.Pop) .From(new { scale = 1, opacity = 1 }) .To(new { scale = 0.1, opacity = 0 }) ) ) ) </div> </div>
using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class TooltipController : Controller { public ActionResult Overview() { return View(); } } }
.form { padding: 20px; } .form img { width: 100px; margin: 10px 0 30px; } .label { font-size: 16px; }