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

Tooltip Width

3 Answers 161 Views

Chart (HTML5)

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

David asked on 15 Sep 2017, 06:04 PM

I need to change tooltip width. I found that one way to do it is the following:

.k-chart-tooltip
            {
                width:500px !important;
            }

However, that will change tooltip sizes for all charts on the page. Ideally i would like to setup tooltip width from code behind.

Just in case i am providing here my tooltip setup.

Thank you

   mySeries.TooltipsAppearance.ClientTemplate = "<div style=""font-size:16px;font-weight:900;"">" & dr("LocationName") & "</div><br/>" &
                         "<table>" &
                         "<tr><td><b>Value in 2015</b></td><td>    " & SharedFunctions.fFormat(dr("BaseYearCurval")) & " ($M)<br/></td></tr>" &
                         "<tr><td><b>Value in " & TargetYear & "</b></td><td>    " & SharedFunctions.fFormat(dr("SelectedYearCurval")) & " ($M)<br/></td></tr>" &
                         "<tr><td><b>" & IIf(direction = "import", "Imports", "Exports") & " to " & comparisonName & " (" & TargetYear & ")</b></td><td>    " & SharedFunctions.fFormat(dr("SelectedYearCountryCurval")) & " ($M)<br/></td></tr>" &
                         "<tr><td><b>Percent Growth " & IIf(direction = "import", "Imports", "Exports") & " to " & comparisonName & " (2015-" & TargetYear & ")</b> </td><td>    " & SharedFunctions.fFormat(dr("portpctgrowthcurval")) & "<br/></td></tr>" &
                         "<tr><td><b>Percent Ratio Growth in Share of " & IIf(direction = "import", "Imports", "Exports") & " to " & comparisonName & "</b> </td><td>    " & SharedFunctions.fFormat(dr("portsharecountrycurval")) & "</td></tr>" &
                         "</table>"

3 Answers, 1 is accepted

answered on 20 Sep 2017, 01:26 PM

Hi David,

The tooltips are HTML div elements with position: absolute, so they will take the size of their content. This means that you can define dimensions in the content. Here are two examples, one of how this works in the basic scenario, one with RadHtmlChart based on the provided snippet.

<div style="border: 2px solid red; position: absolute; top: 10px; left: 10px; background: yellow; z-index:2">

<div style="background: blue; width: 500px;">content</div>

</div>

<telerik:RadHtmlChart runat="server" ID="rhc1" Width="500px" Height="300px">

<PlotArea>

<Series>

<telerik:AreaSeries>

<TooltipsAppearance>

<ClientTemplate>

<div style="font-size:16px;font-weight:900; width: 500px;">location name</div><br/>

<table style="width: 500px;table-layout:fixed;">

<tr><td><b>Value in 2015</b></td><td> BaseYearCurval ($M)<br/></td></tr>

<tr><td><b>Value in " & TargetYear & "</b></td><td> "SelectedYearCurval ($M)<br/></td></tr>

<tr><td><b>Imports to comparisonName TargetYear </b></td><td> SelectedYearCountryCurval ($M)<br/></td></tr>

<tr><td><b>Percent Growth Imports to comparisonName TargetYear</b> </td><td> portpctgrowthcurval<br/></td></tr>

<tr><td><b>Percent Ratio Growth in Share of Imports to comparisonName </b> </td><td> portsharecountrycurval</td></tr>

</table>

</ClientTemplate>

</TooltipsAppearance>

<SeriesItems>

<telerik:CategorySeriesItem Y="1" />

<telerik:CategorySeriesItem Y="2" />

<telerik:CategorySeriesItem Y="3" />

<telerik:CategorySeriesItem Y="4" />

</SeriesItems>

</telerik:AreaSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

Regards,

Marin Bratanov
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Tooltip Width

3 Answers, 1 is accepted