Adjust width and height of tooltip dynamically using javascript

[Prava kafle]

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

[Kevin]

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.

[Prava kafle]

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

[Marin Bratanov]

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

[Prava kafle]

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

[Marin Bratanov]

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