Hello,
I've set up an HTMLChart Column Chart. The tooltips appear on the right of each column when hovering over the column. For the columns at the far right side of the chart, this means the tooltips are squished and unreadable. Is there a way to change the position of the tooltips so the ones on the right side of the chart can be fully seen?
Thanks.
I've set up an HTMLChart Column Chart. The tooltips appear on the right of each column when hovering over the column. For the columns at the far right side of the chart, this means the tooltips are squished and unreadable. Is there a way to change the position of the tooltips so the ones on the right side of the chart can be fully seen?
Thanks.
5 Answers, 1 is accepted
0
Hello Kya,
The tooltip is a single div element whose position and content are changed dynamically depending on the hovered series. I am afraid this behavior cannot be changed and having several tooltips always shown is not possible at this point.
Regards,
Marin Bratanov
Telerik
The tooltip is a single div element whose position and content are changed dynamically depending on the hovered series. I am afraid this behavior cannot be changed and having several tooltips always shown is not possible at this point.
Regards,
Marin Bratanov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Kya
Top achievements
Rank 1
Rank 1
answered on 06 Oct 2013, 08:26 PM
Thanks Marin,
I think you misunderstood my question. I don't want to have the tooltip always visible. The tooltips for the columns on the right side of the chart are cut off when they appear because they are positioned to the right of the column, and don't show past the edge of the chart. See the attached screenshot. I have a chart in a panel in a RadPageView which is part of a RadMultiPage. In the attached image my mouse is not seen, but it is hovering over the column on the far right. You can see the tooltip is cut off. How do I fix this?
I think you misunderstood my question. I don't want to have the tooltip always visible. The tooltips for the columns on the right side of the chart are cut off when they appear because they are positioned to the right of the column, and don't show past the edge of the chart. See the attached screenshot. I have a chart in a panel in a RadPageView which is part of a RadMultiPage. In the attached image my mouse is not seen, but it is hovering over the column on the far right. You can see the tooltip is cut off. How do I fix this?
0
Hello,
I tried this scenario and things seem to work fine for me, the tooltips detect the edge of the available viewport (in my test case - of the pageView's iframe) and position themselves properly:
and for the default page:
I am attaching here a video from my test so you can see how things work on my end and confirm if I am missing something.
I would also advise that you see if upgrading to the latest controls helps. Currently the Q3 2013 BETA release is the latest one, with the official Q3 2013 being planned for the middle of the next week.
You can also check for the following things:
- custom CSS on the page that may be affecting the chart. Especially global rules like div { /*something*/ }
- parent elements in the chart with special positioning (e.g. its direct parent, the form, the body) that may be affecting (and offestting) the positioning logic of the tooltips
These are easiest tested by removing all custom CSS from the page to see if the behavior changes.
Regards,
Marin Bratanov
Telerik
I tried this scenario and things seem to work fine for me, the tooltips detect the edge of the available viewport (in my test case - of the pageView's iframe) and position themselves properly:
<telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1"> <Tabs> <telerik:RadTab Text="first" Selected="true"> </telerik:RadTab> <telerik:RadTab Text="second"> </telerik:RadTab> </Tabs></telerik:RadTabStrip><telerik:RadMultiPage runat="server" ID="RadMultiPage1"> <telerik:RadPageView runat="server" ID="RadPageView1" ContentUrl="somePage.aspx"> </telerik:RadPageView> <telerik:RadPageView runat="server" ID="RadPageView2" ContentUrl="Default.aspx" Height="500px" Width="620px"> </telerik:RadPageView></telerik:RadMultiPage>and for the default page:
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="300px"> <PlotArea> <Series> <telerik:ColumnSeries> <TooltipsAppearance> <ClientTemplate> some text: #= value # <br /> more text </ClientTemplate> </TooltipsAppearance> </telerik:ColumnSeries> </Series> </PlotArea></telerik:RadHtmlChart>protected void Page_Load(object sender, EventArgs e){ for (int i = 0; i < 50; i++) { CategorySeriesItem item = new CategorySeriesItem(i); (RadHtmlChart1.PlotArea.Series[0] as ColumnSeries).SeriesItems.Add(item); }}I am attaching here a video from my test so you can see how things work on my end and confirm if I am missing something.
I would also advise that you see if upgrading to the latest controls helps. Currently the Q3 2013 BETA release is the latest one, with the official Q3 2013 being planned for the middle of the next week.
You can also check for the following things:
- custom CSS on the page that may be affecting the chart. Especially global rules like div { /*something*/ }
- parent elements in the chart with special positioning (e.g. its direct parent, the form, the body) that may be affecting (and offestting) the positioning logic of the tooltips
These are easiest tested by removing all custom CSS from the page to see if the behavior changes.
Regards,
Marin Bratanov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Kya
Top achievements
Rank 1
Rank 1
answered on 09 Oct 2013, 01:31 AM
Thanks so much, Marin.
You helped me identify the issue. My chart was nested deep within a div with a css class which had overflow set to hidden. Removing that solved the problem.
You helped me identify the issue. My chart was nested deep within a div with a css class which had overflow set to hidden. Removing that solved the problem.
0
Phuong
Top achievements
Rank 2
Rank 2
answered on 02 Jun 2014, 04:52 AM
i dont custom CSS on the page that may be affecting the chart