You can use tooltip API members to manage tooltip visibility in code. This demo creates a DevExtreme PieChart and disables its default tooltip. When you click a pie segment or select an item in the "Choose Region" box, a showTooltip() method call displays the corresponding tooltip.
@model IEnumerable<object>
@(Html.DevExtreme().PieChart()
.ID("chart")
.Type(PieChartType.Doughnut)
.Palette(VizPalette.SoftPastel)
.Title("The Population of Continents and Regions")
.Tooltip(t => t
.Enabled(false)
.Format(Format.Millions)
.CustomizeTooltip(@<text>
function (arg) {
return {
text: arg.argumentText + "<br />" + arg.valueText
};
}
</text>)
)
.Size(s => s.Height(350))
.OnPointClick(@<text>
function(e) {
var point = e.target;
point.showTooltip();
$("#region").dxSelectBox("option", "value", point.argument);
}
</text>)
.Legend(l => l.Visible(false))
.Series(s => s.Add().ArgumentField("Region").ValueField("Val"))
.DataSource(Model)
)
<div class="controls-pane">
@(Html.DevExtreme().SelectBox()
.ID("region")
.Width(250)
.InputAttr("aria-label", "Region")
.DisplayExpr("Region")
.ValueExpr("Region")
.Placeholder("Choose region")
.DataSource(Model)
.OnValueChanged(@<text>
function(data) {
var chart = $("#chart").dxPieChart("instance");
chart.getAllSeries()[0].getPointsByArg(data.value)[0].showTooltip();
}
</text>)
)
</div>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult TooltipAPI() {
return View(SampleData.PopulationData);
}
}
}#region {
display: inline-block;
}
.controls-pane {
padding-top: 20px;
text-align: center;
}