Formatting the Tooltip

7 posts, 1 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 21 Mar 2013 Link to this post

    I'm trying to set up a sparkline, and I've got it working.

    However, the tool tip shows the data field name, as well as the value, unlike your demos, where just the number is shown.
    @(Html.Kendo().Sparkline()
    .Name("BatchTimeSpark")
    .Type(SparklineType.Column)
    .DataSource(ds=>ds
        .Read(read => read.Action("GetBatchStats", "Home"))
      )
      .Series(s=>s
          .Column("RunLength")
      )
       
       
      )
    I've attached a screenshot of the tool tip.
    Also, what's the best way to set the height. My chart seems very short (the values are small, but I expected it to scale).

    Thanks
    --
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 25 Mar 2013 Link to this post

    Hello Andrew,

    Apologies for not getting back to you earlier.

    Up to your questions
    • I believe the illustrated issue is CSS related (most probably some border is applied to the table elements of the tooltip) and in order to assist you best and provide concrete recommendations I will need a small runnable example which demonstrates it. Please provide such a project and I will check it right a way. Thank you in advance for your time;
    • You can achieve this using custom CSS. For example: 
      .k-sparkline {
          line-height: //....px;
      }

    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. UI for ASP.NET MVC is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 25 Mar 2013 Link to this post

    Thanks.

    I've created a new project, and set up the sample.  I think it's related to the Site.css file, as using the one generated by the template , the tooltips look better (although still have a description).  However, my project was already set-up, so I copied the css across.  I really need to know exactly which elements are required.

    The attached project uses my original site.css, and displays the same issues as my actual project.

    NB: I've had to delete the binaries, and scripts from the ZIP file to get it to upload.

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 27 Mar 2013 Link to this post

    Hi Andrew,

    Thank you for sending your project.

    The illustrated result is caused by the tabletable td and table th CSS rules from the Site.css file, where a border is set. Hence in order to achieve the desired outcome you should override the aforementioned rules for the Chart tooltip's table. For example: 
    <style>
    .k-sparkline table,
    .k-sparkline table td,
    .k-sparkline table th {
        border: none;
    }
     
    .k-sparkline table th {
        background: none;
    }
    </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. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 27 Mar 2013 Link to this post

    Thanks for this. The tooltips now look a lot better.

    However, I really want to show the number without the field name (like your demo http://demos.kendoui.com/dataviz/sparklines/index.html ). 

    How can I do this?
  7. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 29 Mar 2013 Link to this post

    Hello Andrew,

    In order to achieve the desired outcome you can set the shared configuration option of the tooltip to false. For example: 
    @(Html.Kendo().Sparkline()
       //....
       .Tooltip(t => t.Shared(false))
    )

    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!
  8. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 02 Apr 2013 Link to this post

    That's great.

    Thanks
Back to Top
UI for ASP.NET MVC is VS 2017 Ready