Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    Tooltip

    Tooltip

    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    <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") .CloseOnOutsideClick(false) .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") .CloseOnOutsideClick(false) .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") .CloseOnOutsideClick(false) .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; }