This is a migrated thread and some comments may be shown as answers.

Tooltips

4 Answers 54 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 11 Apr 2013, 03:05 PM
I want to reduce the width of the tooltip box border and also tweak it so that the text is properly centered - in all the samples and in my code the text seems to have some left padding but no right padding - and the outer box is horribly fat.

Any way yet to adjust this or is this another Qx development?

Anything that can be done with a jquery fudge?

I'm really trying to get this working so I can get rid of my old DevExpress charts!

Regards

Jon

4 Answers, 1 is accepted

Sort by
0
MasterChiefMasterChef
Top achievements
Rank 2
answered on 11 Apr 2013, 07:53 PM
Hi Jon,

Have you checked out all of the CSS selectors for styling the RadToolTip appearance?
http://www.telerik.com/help/aspnet-ajax/tooltip-appearance-css-selectors.html

If so, you may want to consider creating a custom skin for your tooltip. Since the borders are stored in sprites, you won't be able to reduce their size very easily.

Good luck,
Master Chief
0
Jon
Top achievements
Rank 1
answered on 12 Apr 2013, 07:43 AM
Sadly these are different, the tooltips that come from the chart are not the same as the radtooltips - at least that's what I think....  Can someone from telerik confirm/deny this?

0
Accepted
Danail Vasilev
Telerik team
answered on 15 Apr 2013, 06:29 AM
Hello Jon,

In the current version of RadControls it is not possible to modify the appearance of the tooltips, except for their background color. Nevertheless, I have logged this idea in our feedback portal here, so that you can monitor, comment and vote on it, in order to raise it priority.

For the time being you can manually change the border width and the padding of the tooltips by getting the class of the tooltip wrapper and change its CSS. For example:
CSS:
<style type="text/css">
    .k-tooltip
    {
        /*Modify the border width*/
        border-width: 5px !important;
        /*Modify the padding*/
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
</style>

Regarding the tooltips that come from the RadTooltip and the ones that come from the RadHtmlChart, they are not the same, so I am not sure if you can directly use the RadTooltip upon the RadHtmlChart.

I have also updated your Telerik points for sharing your ideas with us.

Greetings,
Danail Vasilev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Jon
Top achievements
Rank 1
answered on 15 Apr 2013, 07:38 AM
Hi Danail,

Many thanks for that - I use a 1px border and they look much better.  Thankfully you can do the CSS fudge - always helpful to be able to have a work around :)

Thanks for the points too!

Regards

Jon
Tags
Chart (HTML5)
Asked by
Jon
Top achievements
Rank 1
Answers by
MasterChiefMasterChef
Top achievements
Rank 2
Jon
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or