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
6
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.