Tooltip z-index

[Philip]

I have a client dashboard that has 4 small line graphs positioned left to right. The tooltip for the values on the right side of the first 3 graphs appear over the top of the next graph, however, the z-index of the next graph appears to be higher than that of the tooltip, so the tooltip appears underneath the graph and is difficult to see. Is there a way to change the z-index of the tooltip or the graphs so that this doesn't happen? Thanks.

UPDATE: I resolved this by changing the z-index of the div container for each of the 4 graphs and making each one 1 level below the previous.

[Tony]

Hi Kendo Team,

I'm having this same issue, however changing the z-index of an outer div is not an option for me, and is not fixing the underlying problem. I think the main issue is that the Tooltip has the ability to leave the underlying svg area. This causes 2 issues:

1) If two charts are side by side and you hover over a column or dot on a line that is close to the right of the chart, the tooltip will appear underneath the second chart area.
2) If a chart is near the edge of the browser window, the tooltip will render off the visible area of the browser window, creating a horizontal scrollbar.

Is it possible to have the tooltip detect that it is near the edge of it's underlying chart, and not leave the area? Alternatively, i've noticed that the tooltip isn't being created with a z-index property.

Is there another way to prevent this from happening?

Regards,
Tony

[Hristo Germanov]

Hi,

1) You can change the z-index of the tooltip with:

.k-chart div
{
   z-index: 1000;
}

2)  I will add the problem as a feature request in our internal system. If we receive more requests for the same functionality, we will schedule it for investigation.

Regards,
Hristo Germanov
the Telerik team

[merikmgrasp]

Philip is correct in his comment above. I have charts being dynamically added in a ASP.NET webpage and they all are float:left. I had to do as he said with setting the z-index of each chart progressively lower.

I attached a before and after to help visualize - look at the area in the red boxes.

In my setup, I have a Chart.ascx control thats dynamically added to webpages (ChartItem CSS class is set to float:left so each Chart.ascx control is side my side):

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ChartItem.ascx.cs" Inherits="Dashboard.Controls.ChartItem" %>

<div class="ChartItem" runat="server" id="divDashboardItem">

    <div runat="server" id="divChart" class="Chart"></div>

     

    <div class="ChartItemFooterLeft"> <asp:Label runat="server" ID="lblCurrency"></asp:Label></div>

    <div class="ChartItemFooterRight"> <asp:Label runat="server" ID="lblDate"></asp:Label></div>

    <asp:Literal runat="server" ID="litJS"></asp:Literal>

</div>

<asp:Panel Runat="server" ID="pnlError" Visible="False">

    <asp:Label id="lblError" Runat="server" ForeColor="Red"></asp:Label>

</asp:Panel>

Each time I add a Chart.ascx control to the webpage, I assign a number to that control - so I set Chart.ascx's ChartNumber property. So in this example, I have 5 Chart.ascx's on a webpage each number 1 to 5.

Now within Chart.ascx's code, I am setting the z-index on the divChart element (this is the div the kendo chart renders in and also note the negative sign):

private void Generate()

        {

            // set the z-index to specify the order in which the divs should lay over each other.

            this.divChart.Style.Add("z-index", (this._ChartNumber * -1000).ToString());

....

}

Everything works great - no more overlap with charts and tool tips.

Hope this helps.

[Tony]

Hi merikmgrasp,

The solution posted by yourself and Philip still doesn't fix the second issue i mentioned - if a chart is near the right side of the page, the tooltip renders off the viewable page area. I know i can fix part of the problem with z-indexing, but i see this as a hack. I'll be voting for the feature request.

Tony

[Claudia]

Hi Kendo Team,

I have the same problem with the tooltip rendering off the visible area of the window. Is there any way to fix this?

Regards,
Claudia

[T. Tsonev]

Hi,

You can apply a margin to the tooltip to offset it by a fixed distance:

.k-chart > div {
    margin-left: -40 px;
}

I hope this helps.

Regards,
Tsvetomir Tsonev
the Telerik team

[Steven]

Hi,

We have this issue currently with a graph within a kendo window. The fixes mentioned above will not work as the tooltip goes beyond the div space allowed for the window, this applies to the left and right of the window. The underlying issue is the tooltip is allowed to go beyond the chart/graph svg.

Please see the attached images to see the issue we are having.

Thanks

[T. Tsonev]

Hello,

The tooltip will do screen boundary detection, but based on the browser. It won't adjust its position inside a window.

I can't think of a fix at the moment other than leaving more space around the chart and adjusting the tooltip size.

Please, file a request for this feature on our UserVoice portal if you have minute.
This will help us gauge the overall interest and prioritize.

Apologies for the caused inconvenience.

Regards,
T. Tsonev
Telerik