Hello,
I am using the RadTooltip in a RadTreeNode template to display data associated with each node in the tooltip. The length of the text will be different for each node. I am hoping to get the following behavior:
- Be able to set a maximum height for the tooltip
- Have the tooltip automatically size the height based on content unless that maximum height is exceeded.
- If that height is exceeded, set the height of the tootip to the maximum and a add vertical scrollbar so all content can be scrolled to.
Can you let me know if this is possible?
Thanks, Craig
1 Answer, 1 is accepted
I already answered your support thread and for your convenience and for others who might have the same requirement, I pasted my reply below:
The tooltip does not currently support the functionality you request out of the box but I added in our TODO list for consideration (this does not ensure that it will be added because this depends on the number of customer requests and to the priorities of tasks).
For the time being I prepared for you the following script:
<%@ Page Language="C#" %> <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head id="Head1" runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <script type="text/javascript"> var maxHeight = 100; function OnClientShow(active) { setTimeout(function () { var height = active._tableElement.offsetHeight < maxHeight ? active._tableElement.offsetHeight : maxHeight; active.set_height(height); active.set_contentScrolling(Telerik.Web.UI.ToolTipScrolling.Auto); active._show(); }, 0); } function OnClientHide(active) { active.set_height(0); active.set_contentScrolling(Telerik.Web.UI.ToolTipScrolling.Default); } </script> <telerik:RadToolTipManager ID="mng" runat="server" AutoTooltipify="true" ToolTipZoneID="tree"Position="MiddleRight" RelativeTo="Element" OnClientShow="OnClientShow" OnClientHide="OnClientHide"Width="100"> </telerik:RadToolTipManager> <telerik:RadTreeView ID="tree" runat="server"> <Nodes> <telerik:RadTreeNode Text="Test" ToolTip="Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test"> </telerik:RadTreeNode> <telerik:RadTreeNode Text="Test" ToolTip="Test<br/>Test<br/>Test<br/>Test"> </telerik:RadTreeNode> <telerik:RadTreeNode Text="Test" ToolTip="Test"> </telerik:RadTreeNode> <telerik:RadTreeNode Text="Test" ToolTip="Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test"> </telerik:RadTreeNode> <telerik:RadTreeNode Text="Test" ToolTip="Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test"> </telerik:RadTreeNode> <telerik:RadTreeNode Text="Test" ToolTip="Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test"> </telerik:RadTreeNode> <telerik:RadTreeNode Text="Test" ToolTip="Test<br/>Test<br/>Test"> </telerik:RadTreeNode> </Nodes> </telerik:RadTreeView> </form> </body> Please, note, that this is the common case without Load On Demand used. If you are using Load On Demand, you should follow the same logic, but use the OnClientResponseEnd event instead of OnClientShow because the content is loaded at that time when on demand. In addition, if you use OnClientRespnseEnd you should reference the tooltip by using the getCurrent static method since the sender is the manager itself.
I hope that the script I prepared for you is helpful as a base for implementing your requirement, let me know how it goes.
Kind regards,
Svetlina
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.