Custom Tooltips in UI for WinForms

This is a migrated thread and some comments may be shown as answers.

Custom Tooltips

20 Answers 191 Views

ChartView

This is a migrated thread and some comments may be shown as answers.

20 Answers, 1 is accepted

answered on 06 Aug 2012, 02:06 PM

Hello Josh,

Thank you for writing.

Currently, RadChartView does not offer support for tooltips. We have tooltip support in our plans and we would appreciate any feedback on what feature you would like to see in it.

If you are referring to the trackball controller, in its current version it cannot be modified, but we are working on it and we will introduce a fully customizable trackball in our next release.

I hope this will be informative. Do not hesitate to write back with any further questions.

Kind regards,
Ivan Petrov
the Telerik team

RadControls for WinForms Q2'12 release is now live! Check out what's new or download a free trial >>

answered on 08 Aug 2012, 02:30 PM

chartview-tooltip.png

Hello Ivan,

I was referring to the tooltips in this tutorial. I was able to get the tooltips showing by adding a ChartToolTipController but they only show XValue and YValue. I wish to change the text that is displayed by adding some extra info from the data record.

answered on 13 Aug 2012, 11:45 AM

Hello Josh,

Thank you for writing back.

The situation with the tooltip support of RadChartView is pretty much the same as with the trackball. We are currently working on a new fully customizable version of the controller, which will allow developers to tailor fit the controller to their needs. As I said in my previous post we would welcome any feedback on features you would like to see in the tooltip controller.

I hope this will be useful. Should you have further questions, I would be glad to help.

Regards,
Ivan Petrov
the Telerik team

RadControls for WinForms Q2'12 release is now live! Check out what's new or download a free trial >>

answered on 20 Mar 2014, 02:39 PM

Tooltip.png

Hello Robert ,

Thank you for contacting Telerik Support.

We introduced the referred feature in Q2 2013 (version 2013.2.612). Here is a sample code snippet, demonstrating how to customize the standard ToolTip:

public Form1()

{

InitializeComponent();

radChartView1.AreaType = ChartAreaType.Cartesian;

BarSeries barSeries1 = new BarSeries();

barSeries1.DataPoints.Add(new CategoricalDataPoint(10, "1"));

barSeries1.DataPoints.Add(new CategoricalDataPoint(4, "2"));

barSeries1.DataPoints.Add(new CategoricalDataPoint(23, "3"));

barSeries1.DataPoints.Add(new CategoricalDataPoint(11, "4"));

barSeries1.DataPoints.Add(new CategoricalDataPoint(15, "5"));

barSeries1.DataPoints.Add(new CategoricalDataPoint(10, "6"));

barSeries1.DataPoints.Add(new CategoricalDataPoint(4, "7"));

barSeries1.DataPoints.Add(new CategoricalDataPoint(7, "8"));

barSeries1.DataPoints.Add(new CategoricalDataPoint(11, "9"));

barSeries1.DataPoints.Add(new CategoricalDataPoint(15, "10"));

radChartView1.Series.Add(barSeries1);

BarSeries barSeries2 = new BarSeries();

barSeries2.DataPoints.Add(new CategoricalDataPoint(6, "1"));

barSeries2.DataPoints.Add(new CategoricalDataPoint(20, "2"));

barSeries2.DataPoints.Add(new CategoricalDataPoint(7, "3"));

barSeries2.DataPoints.Add(new CategoricalDataPoint(8, "4"));

barSeries2.DataPoints.Add(new CategoricalDataPoint(4, "5"));

barSeries2.DataPoints.Add(new CategoricalDataPoint(10, "6"));

barSeries2.DataPoints.Add(new CategoricalDataPoint(24, "7"));

barSeries2.DataPoints.Add(new CategoricalDataPoint(17, "8"));

barSeries2.DataPoints.Add(new CategoricalDataPoint(18, "9"));

barSeries2.DataPoints.Add(new CategoricalDataPoint(43, "10"));

radChartView1.Series.Add(barSeries2);

ChartTooltipController toolTipController = new ChartTooltipController();

toolTipController.DataPointTooltipTextNeeded += toolTipController_DataPointTooltipTextNeeded;

radChartView1.Controllers.Add(toolTipController);

}

private void toolTipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)

{

e.Tooltip.BackColor = Color.Yellow;

e.Tooltip.ForeColor = Color.Red;

e.Tooltip.OwnerDraw = true;

e.Tooltip.Draw += ToolTip_Draw;

}

private void ToolTip_Draw(object sender, DrawToolTipEventArgs e)

{

ToolTip toolTip = sender as ToolTip;

e.Graphics.FillRectangle(new SolidBrush(toolTip.BackColor), e.Bounds);

e.DrawBorder();

e.DrawText(TextFormatFlags.Left );

}

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

answered on 28 Apr 2014, 08:08 PM

Hi,
I'm using custom tooltips on a scatterlineseries/ScatterDatapoints chartview by adding a new ChartTooltipController and handling the DataPointTooltipTextneeded event - as outlined in the previous response. The tooltip includes the series name and the x,y coordinates. However when I hover near a point it often displays the tooltip for the wrong point (which I can tell from the x,y coordinate). How can I assure I'm getting the tooltip for the closest datapoint? The x coordinates have large spacial separation and often it displays tooltips for points nowhere near the mouse position.

One other tooltip question - I was not able to display tooltips for Categoricaldatapoints. Do tooltips work for for this type?

Thanks,

John

answered on 01 May 2014, 10:26 AM

Hello John,

Thank you for writing.

I confirm that incorrect tooltip is displayed for ScatterDataPoints. I have logged it in our Feedback Portal. You can track its progress, subscribe for status changes and add your vote/comment to it on the following link - Feedback Item.

Currently, the possible workaround that I can suggest is to use custom renderer:

public Form1()

{

InitializeComponent();

this.radChartView1.CreateRenderer += radChartView1_CreateRenderer;

}

private void radChartView1_CreateRenderer(object sender, ChartViewCreateRendererEventArgs e)

{

e.Renderer = new CustomCartesianRenderer(e.Area as CartesianArea);

}

public class CustomCartesianRenderer : CartesianRenderer

{

public CustomCartesianRenderer(CartesianArea area) : base(area)

{

}

protected override void Initialize()

{

base.Initialize();

for (int i = 0; i < this.DrawParts.Count; i++)

{

ScatterSeriesDrawPart scatterPart = this.DrawParts[i] as ScatterSeriesDrawPart;

if (scatterPart != null)

{

this.DrawParts[i] = new CustomScatterSeriesDrawPart((ScatterLineSeries)scatterPart.Element, this);

}

public class CustomScatterSeriesDrawPart : ScatterLineSeriesDrawPart

{

public CustomScatterSeriesDrawPart(ScatterLineSeries series, IChartRenderer renderer)

: base(series, renderer)

{

}

public override DataPoint HitTest(Point location)

{

for (int i = 0; i < this.Element.DataPoints.Count; i++)

{

RadRect slot = this.Element.DataPoints[i].LayoutSlot;

float pointHalfWidth = this.Element.PointSize.Width / 2;

float pointHalfHeight = this.Element.PointSize.Height / 2;

RectangleF scatterBounds = new RectangleF((float)(this.OffsetX + slot.X - pointHalfWidth),

(float)(this.OffsetY + slot.Y - pointHalfHeight), this.Element.PointSize.Width, this.Element.PointSize.Height);

if (scatterBounds.Contains(location.X, location.Y))

{

return this.Element.DataPoints[i];

}

return null;

}

As to the tooltip functionality for CategoricalDataPoints, currently, it is not supported. However, it is a reasonable request and I have logged it in our Feedback Portal as well. You can track its progress, subscribe for status changes and add your vote/comment to it on the following link - Feedback Item.

I have also added 1000 Telerik points for reporting this.

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.

answered on 22 May 2014, 06:28 PM

customrenderer.jpg

Hi,
Thanks for your response. I am having a problem implementing the code from your previous post. DataPoints does not have a Count property and is not indexible. See attached.

Thanks for your help.
John

answered on 26 May 2014, 09:51 AM

572417-ChartToolTip.zip

ChartToolTips.gif

Hello John,

Thank you for writing back.

I have attached my sample project, containing the provided code from my previous post. This solution is suitable for our latest version. Could you please share in which version you experience difficulties in implementing the workaround?

I am looking forward to your reply.

Regards,
Desislava
Telerik

answered on 08 Apr 2015, 04:20 PM

Hi All,

On the issue of presenting custom tooltips, I have used your suggestion to create and use a customtooltip controller, however I have an issue at the event level to determine the XValue of the specific data point, which in my case is a date from CategoricalDataPoint of an DateTimeCategoricalAxis.

private void toolTipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)

{

CategoricalDataPoint point = e.DataPoint as CategoricalDataPoint;

e.Text = point.Value //return only Yaxis value!

//e.Tooltip.BackColor = Color.Yellow;

//e.Tooltip.ForeColor = Color.Red;

//e.Tooltip.OwnerDraw = true;

}

I need to get the Date part X value, in addition to the Y value of the point, in order to format a special tooltip text block. Can you please help me on how I can do this?

Regards,

George

answered on 13 Nov 2018, 12:24 PM

Hello, Dipak,

You can find below a sample code snippet how to handle the ChartTooltipController.DataPointTooltipTextNeeded event and specify what text to be displaye din the tooltip considering the X and Y values of the ScatterDataPoint for example:

public RadForm1()

{

InitializeComponent();

ScatterSeries scatterSeries = new ScatterSeries();

scatterSeries.Name = "";

scatterSeries.DataPoints.Add(new ScatterDataPoint(15, 19));

scatterSeries.DataPoints.Add(new ScatterDataPoint(18, 10));

scatterSeries.DataPoints.Add(new ScatterDataPoint(13, 15));

scatterSeries.DataPoints.Add(new ScatterDataPoint(10, 8));

scatterSeries.DataPoints.Add(new ScatterDataPoint(5, 12));

scatterSeries.PointSize = new SizeF(8, 8);

this.radChartView1.Series.Add(scatterSeries);

ScatterSeries scatterSeries2 = new ScatterSeries();

scatterSeries2.Name = "";

scatterSeries2.DataPoints.Add(new ScatterDataPoint(20, 20));

scatterSeries2.DataPoints.Add(new ScatterDataPoint(15, 10));

scatterSeries2.DataPoints.Add(new ScatterDataPoint(7, 6));

scatterSeries2.DataPoints.Add(new ScatterDataPoint(18, 22));

scatterSeries2.DataPoints.Add(new ScatterDataPoint(10, 10));

scatterSeries2.PointSize = new SizeF(8, 8);

scatterSeries.Shape = new RoundRectShape(0);

this.radChartView1.Series.Add(scatterSeries2);

ChartTooltipController tooltipController = new ChartTooltipController();

this.radChartView1.Controllers.Add(tooltipController);

tooltipController.DataPointTooltipTextNeeded += tooltipController_DataPointTooltipTextNeeded;

}

private void tooltipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)

{

ScatterDataPoint dp = e.DataPoint as ScatterDataPoint;

if (dp != null)

{

e.Text = "X: " + dp.XValue + " Y: " + dp.YValue;

}

I hope this information helps. If you need any further assistance please don't hesitate to contact me.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 14 Nov 2018, 08:07 AM

Hello, Dipak,

You may follow a similar approach for the LineSeries as well. It is just necessary to cast the DataPointTooltipTextNeededEventArgs.DataPoint to CategoricalDataPoint. Here is the modified code snippet:

public RadForm1()

{

InitializeComponent();

LineSeries lineSeries = new LineSeries();

lineSeries.PointSize = new SizeF(8, 8);

lineSeries.DataPoints.Add(new CategoricalDataPoint(20, "Jan"));

lineSeries.DataPoints.Add(new CategoricalDataPoint(22, "Apr"));

lineSeries.DataPoints.Add(new CategoricalDataPoint(12, "Jul"));

lineSeries.DataPoints.Add(new CategoricalDataPoint(19, "Oct"));

this.radChartView1.Series.Add(lineSeries);

LineSeries lineSeries2 = new LineSeries();

lineSeries2.PointSize = new SizeF(8, 8);

lineSeries2.DataPoints.Add(new CategoricalDataPoint(18, "Jan"));

lineSeries2.DataPoints.Add(new CategoricalDataPoint(15, "Apr"));

lineSeries2.DataPoints.Add(new CategoricalDataPoint(17, "Jul"));

lineSeries2.DataPoints.Add(new CategoricalDataPoint(22, "Oct"));

this.radChartView1.Series.Add(lineSeries2);

ChartTooltipController tooltipController = new ChartTooltipController();

this.radChartView1.Controllers.Add(tooltipController);

tooltipController.DataPointTooltipTextNeeded += tooltipController_DataPointTooltipTextNeeded;

}

private void tooltipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)

{

CategoricalDataPoint dp = e.DataPoint as CategoricalDataPoint;

if (dp != null)

{

e.Text = "V- " + dp.Value + " C- " + dp.Category;

}

I hope this information helps.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 15 Nov 2018, 12:39 PM

Hello, Dipak,

The DataPointTooltipTextNeeded event gives you the freedom to control what text to be displayed. So when you hover a certain DataPoint, the event is fired and you can set the DataPointTooltipTextNeededEventArgs.Text considering the target DataPointTooltipTextNeededEventArgs.DataPoint. You can find to which ChartSeries the target point is associated and format the string respectively. You can find below a sample code snippet how to determine for which series you are showing a tool-tip:

public RadForm1()

{

InitializeComponent();

LineSeries lineSeries = new LineSeries();

lineSeries.Name = "q1";

lineSeries.PointSize = new SizeF(8, 8);

lineSeries.DataPoints.Add(new CategoricalDataPoint(20, "Jan"));

lineSeries.DataPoints.Add(new CategoricalDataPoint(22, "Apr"));

lineSeries.DataPoints.Add(new CategoricalDataPoint(12, "Jul"));

lineSeries.DataPoints.Add(new CategoricalDataPoint(19, "Oct"));

this.radChartView1.Series.Add(lineSeries);

LineSeries lineSeries2 = new LineSeries();

lineSeries2.Name = "q2";

lineSeries2.PointSize = new SizeF(8, 8);

lineSeries2.DataPoints.Add(new CategoricalDataPoint(18, "Jan"));

lineSeries2.DataPoints.Add(new CategoricalDataPoint(15, "Apr"));

lineSeries2.DataPoints.Add(new CategoricalDataPoint(17, "Jul"));

lineSeries2.DataPoints.Add(new CategoricalDataPoint(22, "Oct"));

this.radChartView1.Series.Add(lineSeries2);

ChartTooltipController tooltipController = new ChartTooltipController();

this.radChartView1.Controllers.Add(tooltipController);

tooltipController.DataPointTooltipTextNeeded += tooltipController_DataPointTooltipTextNeeded;

}

private void tooltipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)

{

CategoricalDataPoint dp = e.DataPoint as CategoricalDataPoint;

if (dp != null)

{

e.Text = "V- " + dp.Value + " C- " + dp.Category;

foreach (ChartSeries series in this.radChartView1.Series)

{

if (series.DataPoints.Contains(dp))

{

Console.WriteLine(series.Name);

}

I hope this information helps.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.