Adjust width and height of tooltip dynamically using javascript

6 posts, 0 answers
  1. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 04 Jan 2013 Link to this post

    Hi,
    Tool tip used in  my Radscheduler shows  long  notes and if the notes are too long, tool tip completely covers browser screen .
    First, I would like to  know the content  width and height and  only if it exceeds '...px' would like to  adjust tooltip width and height on client side .

    function onClientBeforeShow(){
       var max-width =  300px;
       var max-height = 350px;
       var currentContentWidth = get  current  tooltip content width
       var currentContentHeight = get  current  tooltip content height
      
         --- if  (currenttooltip width  >max-width){
                   set tooptipwidth  = max-width
                   and show horizontalscrollbar
        }

        --- if  (currenttooltipHeight  >max-height){
                   set tooptip height = max-height
                        and show verticalscrollbar
       }  

    }




    How can I implement above logic. I tried to get content width and height and it always returned null.


    Thanks,
    Prava
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 05 Jan 2013 Link to this post

    Hello Prava,

    I would suggest hanlding the OnClientShow event, rather than OnClientBeforeShow because that event is too early in the rendering process, thus the reason it returns null.

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 07 Jan 2013 Link to this post

    Hi Kevin,

    Even on client beforeshow event  returns a value of "0" for height and width.
    I want the same functionality as described in this link, however given code also returns  width and height value = 0.

    http://www.telerik.com/community/forums/aspnet-ajax/tooltip/radtooltip-auto-height-sizing.aspx


    Thanks,
    Prava
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 09 Jan 2013 Link to this post

    Hello Prava,

    As Kevin said - OnClientBeforeShow is too early, usually even the popup is not created yet. In case you are using some form of load-on-demand you need the OnClientResponseEnd event of RadToolTipmanager, in case you only use JavaScript the OnClientShow event should be used.

    On adjusting the width and height of a tooltip - the following thread can be helpful as it provides several options: http://www.telerik.com/community/forums/aspnet-ajax/tooltip/radtooltipmanager-issues-in-some-browsers.aspx. My replies here and here offer the concrete suggestions. You may also find interesting the getBounds() method from our static client library. Generally, getting HTML dimensions is a general development task that is not directly related to our controls.


    All the best,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 09 Jan 2013 Link to this post

    Hi Marin,

    I am not using load on demand, I tried to set scroll on client shown event based on scroll height and it did not work.
    So, as an alternative I tried to count the length of  tooltip text and adjust height and width. Given below is my code.
    " setToolTipSize" did adjust width and height but didnot show scroll bar.
    How can  implement scroll behavior?

     function setToolTipSize(sender, eventArgs) {
                    var height = $telerik.$(sender.get_contentElement())[0].scrollHeight;
                   var width = $telerik.$(sender.get_contentElement())[0].scrollWidth;
                    if ( height > 400) {                     
                        sender.set_width(350);
                        sender.set_height(400);
                        sender.set_contentScrolling(Telerik.Web.UI.ToolTipScrolling.Auto);   //THIS DOESNOT WORK
                     }

    }





                         //Sets Appointment tooltip position
                  function clientBeforeShow(sender, eventArgs) {
                        var contentText = sender._text;

                        if (contentText.length > 250) {
                             sender.set_width(350);
                              sender.set_height(400);
                              sender.set_contentScrolling(Telerik.Web.UI.ToolTipScrolling.Auto); //I used this as an alternative and it works
                      }

                      w = $telerik.$(window).width() / 2;
                      h = $telerik.$(window).height() / 2;

                      if ((sender._mouseX > w) && (sender._mouseY > h)) {
                          sender.set_position(Telerik.Web.UI.ToolTipPosition.TopLeft);
                          return;
                      }
                      if ((sender._mouseX < w) && (sender._mouseY > h)) {
                          sender.set_position(Telerik.Web.UI.ToolTipPosition.TopRight);
                          return;
                      }
                      if ((sender._mouseX > w) && (sender._mouseY < h)) {
                          sender.set_position(Telerik.Web.UI.ToolTipPosition.BottomLeft);
                          return;
                      }

                      sender.set_position(Telerik.Web.UI.ToolTipPosition.BottomLeft); //BottomRight

    }




      <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Animation="Fade"  
                          HideEvent="LeaveTargetAndToolTip"   OnClientBeforeShow="clientBeforeShow"      OnClientShow="setToolTipSize"                                              AutoTooltipify="true"     OnClientHide="OnClientHide"   >

                                           
                                    </telerik:RadToolTipManager>

    Thanks,
    Prava
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 10 Jan 2013 Link to this post

    Hello Prava,

    The setter for the content scrolling must, indeed, be used before the popup is created because it sets properties in its HTML elements. This is why it can only work in the markup (ContentScrolling="Auto") or in the OnClientBeforeShow event. If you always want to have scrollbars I can suggest you set the ContentScrolling to Both in the markup.

    Another way to get a scrollbar is adding a simple div that will wrap your content and this div will have fixed dimensions set so it overflowing content is present it will produce a scrollbar and not stretch, as is the default behavior of HTML elements.


    Greetings,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017