Tooltip Width

4 posts, 0 answers
  1. David
    David avatar
    301 posts
    Member since:
    Mar 2014

    Posted 15 Sep 2017 Link to this post

    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>&nbsp;&nbsp;&nbsp;&nbsp;" & SharedFunctions.fFormat(dr("BaseYearCurval")) & " ($M)<br/></td></tr>" &
                             "<tr><td><b>Value in " & TargetYear & "</b></td><td>&nbsp;&nbsp;&nbsp;&nbsp;" & SharedFunctions.fFormat(dr("SelectedYearCurval")) & " ($M)<br/></td></tr>" &
                             "<tr><td><b>" & IIf(direction = "import", "Imports", "Exports") & " to " & comparisonName & " (" & TargetYear & ")</b></td><td>&nbsp;&nbsp;&nbsp;&nbsp;" & 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>&nbsp;&nbsp;&nbsp;&nbsp;" & 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>&nbsp;&nbsp;&nbsp;&nbsp;" & SharedFunctions.fFormat(dr("portsharecountrycurval")) & "</td></tr>" &
                             "</table>"

     

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5359 posts

    Posted 20 Sep 2017 Link to this post

    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.
  3. David
    David avatar
    301 posts
    Member since:
    Mar 2014

    Posted 20 Sep 2017 in reply to Marin Bratanov Link to this post

    Hi Marin,

      My bad. Your answer pointed me to one of css files in which i assigned width to tooltip. That forced me to over-complicate things

    Thank you very much

    David

  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5359 posts

    Posted 21 Sep 2017 Link to this post

    No problem David, I am glad you have resolved the situation. I also created a small KB that explains this: http://www.telerik.com/support/kb/aspnet-ajax/chart-(html5)/details/how-to-set-dimensions-(width-and-height)-to-radhtmlchart-tooltips.

    --Marin

Back to Top