Position Tooltip

13 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
    2592 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. Kendo UI is VS 2017 Ready
  4. Mark
    Mark avatar
    15 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?
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 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!
  6. 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?
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 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!
     
  8. 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.
  9. Colin
    Colin avatar
    4 posts
    Member since:
    Jan 2011

    Posted 11 Feb 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.
  10. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 16 Feb 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!
     
  11. Colin
    Colin avatar
    4 posts
    Member since:
    Jan 2011

    Posted 16 Feb 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!
  12. Colin
    Colin avatar
    4 posts
    Member since:
    Jan 2011

    Posted 19 Feb 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!

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

    Posted 19 Feb 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.
  14. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 24 Feb 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!
     
Back to Top
Kendo UI is VS 2017 Ready