TOOLTIP STATIC POSITION

12 posts, 2 answers
  1. David
    David avatar
    12 posts
    Member since:
    Nov 2012

    Posted 18 Dec 2012 Link to this post

    I need that the tooltip, appear in one position of the chart, in the chart or outside it
    someone can do this in any moment
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 19 Dec 2012 Link to this post

    Hi David,

    This can be achieved using the following approach: 
    • Set visible: false to the default tooltip in Kendo UI Chart;
    • In the seriesHover event call a function which sets the tooltip with a custom position.
    • <script>
      $("#chart").kendoChart({
        //....
         tooltip: {
            visible: false
         },
         seriesHover: showTooltip
      });
        
      var showTooltip = function(e) {$("#chart .k-tooltip").html(e.value).show();
      }
      </script>
       
      <style>
      .k-tooltip{
         //custom position
      }​
      </style>

    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. David
    David avatar
    12 posts
    Member since:
    Nov 2012

    Posted 19 Dec 2012 Link to this post

    THANKSSS
  4. David
    David avatar
    12 posts
    Member since:
    Nov 2012

    Posted 19 Dec 2012 Link to this post

    there was a problem.. this .k-toolTip{//position }, put all tooltips of different charts in my app at this position 
  5. David
    David avatar
    12 posts
    Member since:
    Nov 2012

    Posted 19 Dec 2012 Link to this post

    im trying to do a dashboard so, i have to implement multiples charts in my aspx
  6. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 20 Dec 2012 Link to this post

    Hello David,

    You could specify the tooltip position for each chart as specify its ID. I.e.: 
    <style>
    #chart1 .k-tooltip{
       //custom position
    }​
     
    #chart2 .k-tooltip{
       //custom position
    }​
     
    #chart3 .k-tooltip{
       //custom position
    }​
     
    ....
    </style>

    If you are not familiar with CSS specificity I recommend reading this article in Smashing Magazine.

    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!
  7. David
    David avatar
    12 posts
    Member since:
    Nov 2012

    Posted 20 Dec 2012 Link to this post

    OoOo Thankss :-)
  8. David
    David avatar
    12 posts
    Member since:
    Nov 2012

    Posted 20 Dec 2012 Link to this post

    im newbie in all jajaja, so i continue asking everything :-)
  9. Jurgen
    Jurgen avatar
    9 posts
    Member since:
    Oct 2011

    Posted 10 Jul 2013 Link to this post

    Works fine, 1 question still. How can I get the percentage value of the donut part I'm hovering over from the showTooltip function?
    With the standard MVC code it's like: .Template("#= kendo.format('{0:P0}', percentage) #" + " score " + "#= category #")
    But I can't get the percentage in the showTooltip function.
  10. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 11 Jul 2013 Link to this post

    Hi Jurgen,

    In order to achieve this you could define the format in the Chart's configuration. For example:

    @(Html.Kendo().Chart(Model)
      //....
      .Tooltip(t => t.Visible(false).Format("{0:P0}%"))
      .Events(ev => ev.SeriesHover("showTooltip"))
    )
     
    <script>
      function showTooltip(e) { $("#chart .k-tooltip").html(kendo.format(e.series.tooltip.format, e.value) + " - " + e.category).show(); }
    </script>
    Let me know if this helps. 

    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. David
    David avatar
    19 posts
    Member since:
    Feb 2015

    Posted 29 Sep 2015 in reply to Iliana Nikolova Link to this post

    The CSS for a specific tooltip is no longer valid because the DIV that gets created for the tooltip is outside of the container now.

  12. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 01 Oct 2015 Link to this post

    Hi David,

    In the current Kendo UI Chart version you could set custom position to the .k-chart-tooltip element. For example: 
    .k-chart-tooltip {
       position: fixed !important;
       top: 0 !important;
       left: 0 !important;
    }


    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