This is a migrated thread and some comments may be shown as answers.

Dynamic Width

7 Answers 194 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Eva Stephen
Top achievements
Rank 1
Eva Stephen asked on 18 Dec 2009, 05:42 PM
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

7 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 19 Dec 2009, 12:49 PM
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.
0
Eva Stephen
Top achievements
Rank 1
answered on 21 Dec 2009, 05:52 PM
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

0
Svetlina Anati
Telerik team
answered on 22 Dec 2009, 12:33 PM
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.
0
Sam
Top achievements
Rank 1
answered on 25 Aug 2010, 07:47 PM
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
0
Fiko
Telerik team
answered on 30 Aug 2010, 03:04 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
ItsMe
Top achievements
Rank 1
answered on 29 Mar 2016, 06:43 PM

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);

            }

0
Sam
Top achievements
Rank 1
answered on 23 Feb 2017, 03:28 PM

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); 
}
Tags
ToolTip
Asked by
Eva Stephen
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Eva Stephen
Top achievements
Rank 1
Sam
Top achievements
Rank 1
Fiko
Telerik team
ItsMe
Top achievements
Rank 1
Sam
Top achievements
Rank 1
Share this question
or