Tooltip z-index

9 posts, 0 answers
  1. Philip
    Philip avatar
    13 posts
    Member since:
    Nov 2011

    Posted 30 Nov 2011 Link to this post

    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.
  2. Tony
    Tony avatar
    23 posts
    Member since:
    May 2011

    Posted 04 Jan 2012 Link to this post

    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
  3. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 09 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. merikmgrasp
    merikmgrasp avatar
    4 posts
    Member since:
    May 2007

    Posted 21 Jan 2012 Link to this post

    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.
  5. Tony
    Tony avatar
    23 posts
    Member since:
    May 2011

    Posted 21 Jan 2012 Link to this post

    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
  6. Claudia
    Claudia avatar
    8 posts
    Member since:
    Feb 2012

    Posted 28 Feb 2012 Link to this post

    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
  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 29 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Steven
    Steven avatar
    8 posts
    Member since:
    Sep 2011

    Posted 31 Mar 2015 in reply to T. Tsonev Link to this post

    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
  9. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 03 Apr 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top