Dynamic Width

[Eva Stephen]

Hi ,

I need to set dynamic width for my tool tip. If the tool tip is too long it has to go next line.

 

Also i noticed in this http://demos.telerik.com/aspnet-ajax/tooltip/examples/bindtotarget/defaultcs.aspx

for single line tooltip the skin looks weird(see the attachment) , for multiple line tool tip the skin looks ok. Most of my tooltip has single line it looks not too good .Do you have any workaround?

Thanks.
Eva

[Svetlina Anati]

Hi Eva ,

What I can suggest is to set Width to the tooltip manager such as needed for the smallest content and do not set any ContentScrolling setting but leave the default one. This should force the tooltip to resize to bigger width when needed and stay with an appropriate one when not needed to enlarge.

Another possiblity is to capture the OnClientShow or OnClientBeforeShow event and set dynamically the desired width there.


Greetings,
Svetlina
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.

[Eva Stephen]

I tried to change the width , it didn't work . Also the tooltip was loosing its border style(see the attachment).

I noticed in this http://demos.telerik.com/aspnet-ajax/tooltip/examples/bindtotarget/defaultcs.aspx

for single line tooltip the skin looks weird(see the attachment from original post) , for multiple line tool tip the skin looks ok. Most of my tooltip has single line it looks not too good .Do you have any workaround?

Thanks.
Eva

[Svetlina Anati]

Hi Eva ,

Are you using RadToolTipManager with OnAjaxUpdate event or a WebService? If so, please try whether executing the following code in the OnClientResponseEnd event fixes the problem:

<script type="text/javascript">

function OnClientResponseEnd(sender, args)
{
  setTimeout(function(){
  var active = Telerik.Web.UI.RadToolTip.getCurrent();
  var width = active._tableElement.offsetWidth;
  active.set_width(width);
  active.get_popupElement().style.width = width + "px";
  }, 0);
}


    </script>

Greetings,
Svetlina
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.

[Sam]

The problem Eva pointed out still exists.
 "I tried to change the width , it didn't work . Also the tooltip was loosing its border style(see the attachment)."

Version 2010.2.713.35

[Fiko]

Hi Sam,

I have attached an example solution which shows how to change the RadToolTip's size using jQuery. Could you please check it and let me know whether it fits your needs?

Greetings,
Fiko
the Telerik team

[ItsMe]

I was trying to dynamically set the height and width, which works fine if I don't have scroll bar set.  The height is fine with scrollbar, and width also adjusts depending on the content; however, when I hover over another item, the width keeps the previous content's width and thus, does not change.  If I don't have any scroll bar set (for vertical), then it's getting the correct width; otherwise, it keeps the width of whatever was hovered over previously and keeps that tooltip's width.

It also works fine if I have scrolling set to Auto, so scroll bar appears both vertically and horizontally; but I want the width to be adjusted without scrollbar and height to have scrollbar.  

 Any ideas?  I have the below for RadTooltipmanager...

function OnClientResponseEnd(sender, args) {

                setTimeout(function () {
                    var active = Telerik.Web.UI.RadToolTip.getCurrent();
                    var width = active._tableElement.offsetWidth;
                    active.set_width(width);
                    active.get_popupElement().style.width = width + "px";

                    var maxHeight = 400;
                    var height = active._tableElement.offsetHeight < maxHeight ? active._tableElement.offsetHeight : maxHeight;
                    active.set_height(height);
                    active.set_contentScrolling(Telerik.Web.UI.ToolTipScrolling.Y);
                    active._show();

                }, 0);

            }

[Sam]

In case anyone is still looking for a solution, the below JavaScript function combined with setting the "OnClientBeforeShow" on the RadToolTip works for me. Make sure it's the "OnClientBeforeShow" and not the "OnClientShow". If you use "OnClientShow", you will see the RadToolTip change it's width to the adjusted width when it first opens. Using "OnClientBeforeShow" adjusts the width before it is displayed. Just change the "50" in the "50 / 100" to the percentage you would like. 

 

function OnClientResponseEnd(sender, args) {
    setTimeout(function () {
      var active = Telerik.Web.UI.RadToolTip.getCurrent();
      var browserWidth = $telerik.$(window).width();
      var browserHeight = $telerik.$(window).height();
      var width = (Math.ceil(browserWidth * 50 / 100));
      active.set_width(width);
      active.get_popupElement().style.width = width + "px";
  }, 0);
}