Scrolling ToolTips

2 posts, 0 answers
  1. Dip
    Dip avatar
    68 posts
    Member since:
    Jun 2008

    Posted 06 Oct 2009 Link to this post

    I am using Telerik version 2008.3.1125.35.
    what I am trying to achieve is to have scoll bar on tooltips.

    I tried

    ContentScrolling

     

    ="Auto" in my aspx page ..the problem with this is that we have to specify height and width with it .

     

    I don't want to do that because I sometime have to display only 5 characters where I don't need a height on 400px where as sometime i need to show a lot.

     

    <telerik:RadToolTip ID="AcuityToolTip" runat="server" RelativeTo="Element" Position="TopRight" Sticky="true" OffsetX="0" OffsetY="0" >

     

     

    </telerik:RadToolTip>

     


    I am not using RadToolTipsmanager because it was creating a lot of problem , so i have one RadToolTips and I hide and show same tooltps again and again.So far everything is great except the condition for scroll bar from client side.

    if(List too long)
    {

    tooltip.set_contentScrolling(0)

    tooltip.set_height(

    "200px");

     

    tooltip.set_width(

    400px");

     


    }
    else
    {
        //hide scrolling and height and width should be auto
    }

    could you tell me how can this be implemented..

    thanks,
    DIP
  2.
  3. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 09 Oct 2009 Link to this post

    Hello Dip,
    The client methods set_width and set_height of the RadToolTip control work only before the tooltip is opened for the first time. That is why, in order to get the behavior you describe, you can use the following code:
    <button id="longText" onclick="ShowToolTip(this); return false;">
        long text</button>
    <button id="shortText" onclick="ShowToolTip(this); return false;">
        short text</button>
    <telerik:RadToolTip ID="RadToolTip1" runat="server" HideEvent="ManualClose" Position="TopLeft"
        RelativeTo="Element">
        TestTestTest TestTest
    </telerik:RadToolTip>
     
    <script type="text/javascript">
        function ShowToolTip(targetControl)
        {
            var tooltip = $find("RadToolTip1");
            if(tooltip.get_targetControl() != targetControl)
            {
                if(tooltip.isVisible())
                {
                    tooltip.hide();
                }
                tooltip.set_targetControl(targetControl);
            }
     
            var tooltipTable = tooltip._tableElement;
            if(targetControl.id == "longText")
            {
                if(tooltipTable)
                {
                    tooltipTable.style.width = "400px";
                    tooltipTable.style.height = "200px";
                }
                else
                {
                    tooltip.set_width("400px");
                    tooltip.set_height("200px");
                }
     
                tooltip.set_contentScrolling(0);
            }
            else
            {
                if(tooltipTable)
                {
                    tooltipTable.style.width = "";
                    tooltipTable.style.height = "";
     
                    var contentElement = tooltip.get_contentElement();
                    contentElement.style.width = "";
                    contentElement.style.height = "";
     
                    tooltip.get_popupElement().style.width = "";
                }
     
                tooltip.set_contentScrolling(5);
            }
     
            if(tooltipTable) tooltip._adjustCallout();
            tooltip.show();
        }
    </script>

    Regards,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top