ADD more appearance options for the tooltips in the RadHtmlChart

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 19 Apr 2022 17:20 by ADMIN

ADMIN

Danail Vasilev

Created on: 15 Apr 2013 06:16

Category: HtmlChart

Type: Feature Request

ADD more appearance options for the tooltips in the RadHtmlChart

Currently tooltips expose properties for changing the background color, format and visibility. Add more appearance options like color (Color property is already exposed), font, border width, border color and padding. For the time being the following workaround can be used:
	<style type="text/css">
		.k-tooltip
		{
			/*Sets border width and color*/
			border-width: 5px !important;
			border-color: Green !important;
			/*Sets padding*/
			padding-left: 5px !important;
			padding-right: 5px !important;
			/*Sets FontSize, FontFamily and color*/
			font: 15px Arial,Helvetica,sans-serif !important;
			color: Red !important;
		}
	</style>

3 comments

ADMIN

Vessy

Posted on: 19 Apr 2022 17:20

Hello,

The tooltips of the chart can be customized through the TooltipsAppearance composite property of each series. Setting the CommonTooltipAppearance will allow you to apply the same styles to all tooltips on the page. For example, you can set the tooltip color and borders through the CommonTooltipsAppearance properties and apply further styling via CSS directly in the tooltip ClientTemplate like follows:

        <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true">
            <PlotArea>
                <CommonTooltipsAppearance BackgroundColor="White" Color="Red">
                    <BorderAppearance Color="Green" Width="5" />
                    <ClientTemplate>
                        <div style="padding: 0 5px; font: 15px Arial,Helvetica,sans-serif">#=value#</div>
                    </ClientTemplate>
                </CommonTooltipsAppearance>
                ...

You can configure even more tooltip options by setting them directly to the underlying Kendo UI widget of the chart:
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/seriesdefaults.tooltip

Regards,
Vessy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Michael

Posted on: 16 Apr 2014 07:06

Need full customization

Adam

Posted on: 21 May 2013 00:53

An offset-x and offset-y would also be fantastic. I am wanting to display an image button link within the tooltip, however when the mouse leaves the main chart area (i.e. the last few points on the right hand side of the chart), the tooltip disappears before you can click the link.