Position Tooltip

15 posts, 0 answers
  1. Juan Sola
    Juan Sola avatar
    26 posts
    Member since:
    Jan 2007

    Posted 27 Aug 2012 Link to this post

    I would like to position the tooltip on line graphs to be more directly above the plot point that to the right. Is this possible? How can I accomplish this?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2617 posts

    Posted 28 Aug 2012 Link to this post

    Hello Juan,

    I am afraid the described functionality is currently not supported in Kendo UI DataViz and there is no suitable workaround I can suggest to achieve it. The implementation of such functionality has been discussed and we will consider its implementation for future versions of the product. 

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Mark
    Mark avatar
    17 posts
    Member since:
    Feb 2010

    Posted 19 Apr 2013 Link to this post

    Same Problems,I  would like to position the tooltip on line graphs to be more directly above the plot point that to the right. Is this possible? How can I accomplish this?
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2617 posts

    Posted 19 Apr 2013 Link to this post

    Hello Mark,

    In order to achieve this you can set negative left margin to the .k-tooltip element. For example: 
    <style>
    .k-tooltip{
        margin-left: -50px;
    }
    </style>

    Kind regards,

    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Wai Hoe
    Wai Hoe avatar
    1 posts
    Member since:
    Jun 2013

    Posted 23 Jun 2014 Link to this post

    Hi, I have a bar chart, I set the margin-left as mentioned in previous post. I looks fine when the browser is in full screen mode, but when resize the browser to different size, the tooltip position no longer display nicely, either too much on the left or right, is there a solution for this matter?
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2617 posts

    Posted 25 Jun 2014 Link to this post

    Hi Wai,

    There is no a universal solution for this case. As a possible workaround I would suggest to set the tooltip margin depending on the window size. As an example: 
    if($(window).width()< 500){
        $(".k-tooltip").css("margin-left", "-20px");
    }

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Jean-François
    Jean-François avatar
    26 posts
    Member since:
    Dec 2012

    Posted 25 Aug 2014 Link to this post

    In case anyone else is looking, here is the uservoice entry to vote for this issue : http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/2981443-tooltips-get-clipped

    Please include this feature, it's rather easy and it's a stupid little feature, yet a deal breaker for our client... quite annoying.
  8. Colin
    Colin avatar
    4 posts
    Member since:
    Jan 2011

    Posted 11 Feb 2016 Link to this post

    Not sure if this has yet to be added. Will keep searching. But we're hoping we could force the tooltip to always position itself at the top of the chart, rather than following the mouse around.
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2617 posts

    Posted 16 Feb 2016 Link to this post

    Hi Colin,

    Although it is not supported out-of-the-box, you could position the tooltip at the top of the chart by using additional CSS. Take a look at this dojo and let me know if it will fit the current requirements.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Colin
    Colin avatar
    4 posts
    Member since:
    Jan 2011

    Posted 16 Feb 2016 in reply to Iliana Nikolova Link to this post

    Thanks Iliana. That makes a lot of sense. Getting the popup to be centered might be a challenge. I'll play around with it. You got me going in the right direction. Thanks!
  11. Colin
    Colin avatar
    4 posts
    Member since:
    Jan 2011

    Posted 19 Feb 2016 in reply to Iliana Nikolova Link to this post

    Follow up question. Iliana, your point would work perfectly if we could render that tooltip within the chart. But it seems to render/create itself on the body by default, not allowing us to use the relative positioning If you add a bunch of text to the top of your example you'll see what I mean. Is it possible to to give the tooltip a parent class/id for where to create the tooltip? If so we'd be able to use what you supplied and position the tooltip easily within the chart area. Thanks!

  12. Colin
    Colin avatar
    4 posts
    Member since:
    Jan 2011

    Posted 19 Feb 2016 in reply to Colin Link to this post

    It looks like I might be able to achieve the positioning I want by using the series hover event and building out my own tooltip. But then it appears that I lose my left/right positioning.
  13. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2617 posts

    Posted 24 Feb 2016 Link to this post

    Hi Colin,

    By design, the tooltip is rendered directly in the body and this cannot be changed. However, you could use the seriesHover and display the tooltip with a custom position (dojo).

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14. Dragos
    Dragos avatar
    45 posts
    Member since:
    Dec 2015

    Posted 10 Mar in reply to Iliana Nikolova Link to this post

    Hello @Iliana, can you provide an example with shared tooltips using the same dojo as above with seriesHover ? 

    http://dojo.telerik.com/uWoPaF/2
  15. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2617 posts

    Posted 14 Mar Link to this post

    Hi Dragos,

    You could use the same approach when shared tooltip is used (updated example). Keep in mind that you could get all points in the same category via the categoryPoints from the event data: 

    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#events-seriesHover


    Regards,
    Iliana Nikolova
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top