RadSlidingPane and its ToolTip

[tmlipinski]

Hi,
The problem is that the tooltip of a RadSlidingPane is:
- not displayed on the expanded pane
- on collapsed pane, its title is displayed as a tooltip, not its ToolTip property value
It's a pity especially because the title itself must be very short: if it becomes longer then approx. 75px (when the pane is 150px wide) it (I mean - the whole header of the expanded sliding pane) starts to be displayed incorrectly (depending on the browser; special problems appear when the pane is docked).

It would be much appreciated to be able to use the RadSlidingPane's property ToolTip.

Regards
Tomasz

[tmlipinski]

Hi,

I see that it's a very hard-to-answer question :-(

I've started to use the "Simple" skin that is skinned without images. In this case the title can be longer than previously. But:
- when it becomes longer and longer it pushes out the "no docking" icon
- it is declared with "text-overflow: elipsis" but it doesn't work (nor the text is clipped) because it has no width declared; when I forced it (adding some overriding CSS):

    .rspSlideTitle
    {
      width: 125px;
    }

the elipsis began to work (or the title started to be clipped - depends on the used browser); the main advantage is that the "no docking" icon remains visible
- for me, the best solution would be to display all the text - wrapped; using this skin it seems to be possible; I changed the above rule to:

    .rspSlideTitle
    {
      width: 125px;
      white-space:normal;
    }

but it doesn't work: the title is trimmed all the time. "white-space: pre;" also doesn't work.
Can I force (and how) wrapping this text without creating my own skin?

Regards

Tomasz

[Eraph]

I'm resurrecting this thread as I am having a similar problem. Setting the Tooltip property does not do anything on a RadSlidingPane control, the tooltip will actually be whatever has been set on the Title property. It would be very useful to have a separate tooltip and title, our requirement is that titles should truncated to ensure that the tabs do not get too big, and when the user hovers over the tab it would show the full title. Could this be implemented in a future release?
Thanks.

[Dobromir]

Hi Phil,

At present RadSlidingPane does not implement the ToolTip property which is inherited from System.Web.UI.WebControl. I have logged your feature request in our database and we will consider such implementation. Here you can find the PITS Issue: Public URL

For the time being you can manually set the tooltip using JavaScript, e.g.:

<telerik:RadSplitter ID="RadSplitter1" runat="server" OnClientLoaded="OnClientLoaded">
    <telerik:RadPane ID="RadPane1" runat="server">
        <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server">
            <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Pane1"></telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both">
    </telerik:RadSplitBar>
    <telerik:RadPane ID="RadPane2" runat="server">
    </telerik:RadPane>
</telerik:RadSplitter>

    <script type="text/javascript">
        function OnClientLoaded(splitter, args)
        {
            var slidingZone = $find("<%=RadSlidingZone1.ClientID %>");
            var sPane = slidingZone.getPaneById("<%=RadSlidingPane1.ClientID %>");
            var tab = sPane.getTabContainer();
            tab.setAttribute("title", "My Custom Title");
        }
    </script>

Kind regards,
Dobromir
the Telerik team

[Eraph]

Thanks for the response, Dobromir.
We're using a slidingzone that may have several panes in it. Is there any way of getting whatever has been specified as the tooltip for a pane from within javascript? The idea is to use a for loop and set up the titles dynamically.

[Niko]

Hello Phil,

You could use the counter-method to setAttribute - getAttribute, so that you get the value of that attribute. Here is a modification of the sample that Dobromir has provided:

function OnClientLoaded(splitter, args)
{
    var slidingZone = $find("<%=RadSlidingZone1.ClientID %>");
    var sPane = slidingZone.getPaneById("<%=RadSlidingPane1.ClientID %>");
    var tab = sPane.getTabContainer();
    var tabTitle = tab.getAttribute("title");
}

Hope this is what you need in order to implement your solution.

Regards,
Niko
the Telerik team

[Eraph]

Thanks Niko, unfortunately that won't work. The value set on the Tooltip property should be different to the Title. What we're trying to achieve is a shortening of the viewable title, with the tooltip representing the full pane name, e.g.
slidingPane.Title = "This is a rather...";
slidingPane.Tooltip = "This is a rather long title";
On client side, the tooltip property is never available. I think I will try to do the shortening client-side instead, that should give us what we need.

[Niko]

Hi Eraph,

I am glad that you have figured a way to go. Still the provided solution is on the client-side and as such the title attribute is actually the tooltip that pops up. This is a browser feature - a title attribute to a link will show that content when hovered. To be more precise the ToolTip on the server-side is the title attribute on the client-side. What we do when render the HTML content is link those two together.

Hope this helps.

All the best,
Niko
the Telerik team

[Eraph]

Hi Neko,
Thanks for your response. What actually happens with the control is that the client's 'title' property is taken from the server 'Title' property, where it should be the server 'Tooltip' property. The value specified in the Tooltip property server side is nowhere to be seen client side.
The Javascript solution works in the meantime, though.