Tooltips not displaying...

[Tim]

I can't get RadToolTip or RadToolTipManager to display tooltips for radcontrols!
I have a normal button and the tooltip and tooltipmanager show the tooltips perfectly for it, as soon as I turn them to point a the radtextbox or the radcombobox, I just get an empty tooltip.  If I set the tooltip message in the controls tooltip, I get the empty RadToolTip under the controls default tooltip message.  What am I missing? 

[Svetlina Anati]

Hi Tim,

The mentioned controls cannot be directly tooltipified due to their specific structure.

I suggest to examine the following KB articles in order to achieve the desired behavior:

http://www.telerik.com/support/kb/article/b454K-hmm-b454T-cmc-b454c-cmc.aspx
http://www.telerik.com/support/kb/article/b454K-hmh-b454T-cmc-b454c-cmc.aspx

Regards,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tim]

thanks for the quick response.  Unfotuneatly, the posted solutions do not work for either.  I read one post a few days ago about conflicts with having a Telerik AJAX Manager and a TooltipManager on the same user control/page.  The posted response for that was to install the SP2 (2008.1.619.20) and that would fix the issue.  Does this issue still exist?

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucViewVehicle.ascx.cs" Inherits="Content_ucViewVehicle" %>
<%@ Register Assembly="Telerik.Web.UI, Version=2008.1.619.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
    Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadScriptManager ID="rsmViewVehicle" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxLoadingPanel ID="alpVeiwVehicle" runat="server" Height="75px" Width="75px">
    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading3.gif") %>'
        style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" />
</telerik:RadAjaxLoadingPanel>
<telerik:RadToolTipManager ID="tltmViewVehicle" runat="server" Skin="Office2007">
    <TargetControls>
        <telerik:ToolTipTargetControl IsClientID="False" TargetControlID="cmbVehicle_DataFeed"
            Value="" />
        <telerik:ToolTipTargetControl IsClientID="True" TargetControlID="txtVehicle_Notes_text"
            Value="Enter the required notes" />
    </TargetControls>
</telerik:RadToolTipManager>
&nbsp;
&nbsp;&nbsp;
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="alpVeiwVehicle">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="cmbVehicle_DataFeed">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="cmbVehicle_Revision" LoadingPanelID="alpVeiwVehicle" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="cmbVehicle_Revision">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="btnCreateRevision" LoadingPanelID="alpVeiwVehicle" />
                <telerik:AjaxUpdatedControl ControlID="txtVehicle_Notes" LoadingPanelID="alpVeiwVehicle" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
&nbsp;&nbsp;

            <asp:Panel ID="pnlView" runat="server" Height="100%" Width="100%">
                <table style="width: 565px">
                    <tr>
                        <td class="VehicleTitle" colspan="3" align="left">
                            View Vehicle</td>
                    </tr>
                    <tr>
                        <td align="left" style="padding-left: 10px" class="VehicleHeaders">
                            Vehicle:</td>
                        <td colspan="2">
                            <asp:Label ID="lblVehicle" runat="server"
                                Width="100%" CssClass="VehicleLabel"></asp:Label></td>
                    </tr>
                    <tr>
                        <td align="left" style="padding-left: 10px" class="VehicleHeaders">
                            *DataFeed:</td>
                        <td align="left">
                            <telerik:RadComboBox ID="cmbVehicle_DataFeed" runat="server" Skin="Office2007" Text="Please Select" AutoPostBack="True" OnSelectedIndexChanged="cmbVehicle_DataFeed_SelectedIndexChanged" ToolTip="Select the datafeed that you wish to use" Width="225px">
                                <Items>
                                    <telerik:RadComboBoxItem runat="server" Selected="True" Text="Please Select" Value="-1" />
                                    <telerik:RadComboBoxItem runat="server" Text="TOPS" Value="TOPS" />
                                    <telerik:RadComboBoxItem runat="server" Text="MPI" Value="MPI" />
                                    <telerik:RadComboBoxItem runat="server" Text="EAL" Value="EAL" />
                                </Items>
                                <CollapseAnimation Duration="200" Type="OutQuint" />
                            </telerik:RadComboBox>
                        </td>
                        <td style="width: 5px">
                            <telerik:RadToolTip ID="RadToolTip1" runat="server" Skin="Office2007" TargetControlID="txtVehicle_Notes"
                                Text="Enter your notes here">
                            </telerik:RadToolTip>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" style="padding-left: 10px" class="VehicleHeaders">
                            *Revision #:</td>
                        <td align="left">
                            <telerik:RadComboBox ID="cmbVehicle_Revision" runat="server" AutoPostBack="True"
                                Enabled="False" Skin="Office2007" Text="Please Select" ToolTip="Select the datafeeds corresponding revision number "
                                Width="225px">
                                <CollapseAnimation Duration="200" Type="OutQuint" />
                            </telerik:RadComboBox>
                        </td>
                        <td style="width: 5px">
                        </td>
                    </tr>
                    <tr>
                        <td align="left" style="padding-left: 10px" class="VehicleHeaders">
                            *Notes (Enter Jira)</td>
                        <td align="left">
                            <asp:RequiredFieldValidator ID="rfvNotes"
                                                        runat="server"
                                                        ControlToValidate="txtVehicle_Notes"
                                                        ErrorMessage="Please enter notes"
                                                        ToolTip="Please enter notes"
                                                        ValidationGroup="ViewVehicle">*</asp:RequiredFieldValidator>
                        </td>
                        <td style="width: 5px">
                            <asp:Button ID="btnCreateRevision" runat="server" Text="Button" ToolTip="Create Autodata Revision Number" /></td>
                    </tr>
                    <tr>
                        <td colspan="3" style="padding-left: 10px" align="left">
                            <telerik:RadTextBox ID="txtVehicle_Notes" runat="server" Enabled="False" Height="124px"
                                TextMode="MultiLine" Width="100%">
                            </telerik:RadTextBox></td>
                    </tr>
                    <tr>
                        <td colspan="3" style="padding-left: 10px">
                            <hr style="height: 1px" color="navy" />
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left: 10px" align="left" class="VehicleHeaders">
                            *Search By:</td>
                        <td align="left">
                            <telerik:RadComboBox ID="cmbVehicle_SearchBy" runat="server" Skin="Office2007" Text="Please Select" Width="225px" Enabled="False">
                                <CollapseAnimation Duration="200" Type="OutQuint" />
                                <Items>
                                    <telerik:RadComboBoxItem runat="server" Selected="True" Text="Please Select" Value="-1" />
                                    <telerik:RadComboBoxItem runat="server" Text="Tablename" Value="Tablename" />
                                    <telerik:RadComboBoxItem runat="server" Text="Category" Value="Category" />
                                </Items>
                            </telerik:RadComboBox>
                        </td>
                        <td style="width: 5px">
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left: 10px" align="left" class="VehicleHeaders">
                            *Tablename/Category:</td>
                        <td align="left">
                            <telerik:RadComboBox ID="cmbVehicle_Tablename" runat="server" AutoPostBack="True"
                                Enabled="False" Skin="Office2007" Text="Please Select" ToolTip="Select the datafeeds corresponding revision number "
                                Width="225px">
                                <CollapseAnimation Duration="200" Type="OutQuint" />
                            </telerik:RadComboBox>
                        </td>
                        <td style="width: 5px">
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left: 10px" align="left" class="VehicleHeaders">
                            Text Search</td>
                        <td align="left">
                            <telerik:RadTextBox ID="txtVehicle_Search" runat="server" Skin="Office2007" Width="225px" Enabled="False">
                            </telerik:RadTextBox></td>
                        <td style="width: 5px">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="padding-left: 10px" align="left" class="reqSeperator">
                            *Required
                            <hr style="height: 1px" color="navy" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" align="center">
                            <asp:Label ID="lblMessage" runat="server" Visible="False"></asp:Label></td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td style="width: 5px">
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td style="width: 5px">
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td style="width: 5px">
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td style="width: 5px">
                        </td>
                    </tr>
                </table>
            </asp:Panel>

 
here is the markup for my usercontrol that the tooltip or the tooltip manager will not work on (with the exception of the button)

[Svetlina Anati]

Hello Tim,

I created a test project based on the provided code but I when I examined it the tooltips were not showing at all instead of showing with no content.

This happens because the IDs you have set as target controls are not the actual IDs of the desired controls because of the following reasons:

1. You are using a User Control and it is an INaming Container which means that it changes the controls' IDs.
2. You have ajaxified some of the controls by using the RadAjaxManager - this means that you actually wrap them in an update panel with a particular ID.

This being said, the ClientID you should use to tooltipify the txtVehicle_Notes control for example should be UcViewVehicle1_UcViewVehicle1_txtVehicle_NotesPanel.

You can inspect the page with the IEDevToolBar or Firefox tools in order to extract the actual ClientIDs of the controls but I do not recommend to use this approach of hardcoding IDs. I suggest to extract them and configure the tooltips in the code-behind, by using the ClientID property.

I also noticed that you are trying to set static, text content to the RadToolTipManager - please, note that in this case you should use the RadToolTip control because the manager's content is dynamically set by using its OnAjaxUpdate event or a WebService. I recommend to examine this online demo in order to decide which control will be more suitable for your different needs.

Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Guenter]

Hello,

thanks so far. This works fine. But I am now facing a other problem with the tooltip manager. The tooltip appears but doesn't show any content.

Here the code:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UcLineStatus.ascx.cs"
    Inherits="UcLineStatus" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Charting" TagPrefix="telerik" %>
<style type="text/css">
    .Content_Wrapper, .Boxes_Wrapper
    {
        overflow: hidden;
        position: relative; /* set width ! */
    }
    .Content, .Boxes_Content
    {
        position: absolute;
        top: 0;
        left: 0;
    }
    .Boxes
    {
        width: 734px;
        height: 192px;
    }
    .Boxes_Wrapper
    {
        width: 686px;
        height: 116px;
        white-space: nowrap;
    }
    .Boxes_Wrapper img
    {
        display: inline;
        width: 2560px;
        height: 1920px;
    }
    .BoxesSlider
    {
        width: 734px;
    }
    .BoxesSlider .RadSlider
    {
        margin: 0 auto;
    }
    .style1
    {
        width: 100%;
    }
</style>

<script type="text/javascript">
// <!CDATA[

    function initWindow(sender, eventArgs) {
        ScrollLine(sender, eventArgs);
        startSimulation();
    }

    function ScrollLine(sender, eventArgs) {
        var wrapperDiv = document.getElementById('boxes_wrapper');
        var contentDiv = document.getElementById('boxes_content');
        var availableWidth = contentDiv.scrollWidth - wrapperDiv.offsetWidth;

        var sliderSmallChange = sender.get_smallChange();
        var sliderMinValue = sender.get_minimumValue();
        var sliderValue = sender.get_value();

        var steps = sliderValue / sliderSmallChange;
        var stepLength = availableWidth / ((sender.get_maximumValue() - sliderMinValue) / sliderSmallChange);

        var newPosition = (-1) * steps * stepLength;
        contentDiv.style.left = ((sliderValue == sliderMinValue) ? 0 : newPosition) + "px";
    }

    function callWebService() {
        var array = GetTableCellIDs();
        var service = new WebService();
        service.GetLineStatus(array, SetBackgroundColor, null, null);

    }

    function GetTableCellIDs() {
        var table = document.getElementById('<%= tblLine.ClientID %>');

        if (table == null) {
            table = document.getElementById("LineStatusContent_tblLine");
        }
        var array = new Array();
        if (table != null) {
            for (var i = 0; i < table.rows.length; i++) {
                for (var j = 0; j < table.rows[i].cells.length; j++) {
                    var temp = table.rows[i].cells[j].id;
                    if (temp != "") {
                        array.push(temp);
                    }
                }
            }
        }
        return array;
    }

    function SetBackgroundColor(result) {
        var array = GetTableCellIDs();
        for (var i = 0; i < array.length; i++) {
            var test = document.getElementById(array[i]);
            if (test != null) {
                test.style.backgroundColor = result[i];
            }
        }
    }

    function startSimulation() {
        window.setInterval(callWebService, 4000);

    }

    // ]]>
</script>

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="tblLine" LoadingPanelID="RadAjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
<telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Position="Center"
    RelativeTo="Element" Width="350px" Height="260px" Animation="Resize" HideEvent="LeaveToolTip"
    Skin="WebBlue" OnAjaxUpdate="OnAjaxUpdate">
</telerik:RadToolTipManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<table class="style1">
    <tr>
        <td>
            <div id="boxes_wrapper" class="Boxes_Wrapper">
                <div id="boxes_content" class="Boxes_Content">
                    <asp:Table ID="tblLine" runat="server">
                        <asp:TableRow>
                            <asp:TableCell BgColor="Green" runat="server" ID="unit1">
                    <img alt="" src="../../Pictures/unit1.JPG" style="width: 113px; height: 100px; margin:10px"/>
                            </asp:TableCell>
                            <asp:TableCell>
                    <p>-</p>
                            </asp:TableCell>
                            <asp:TableCell BgColor="Red" ID="unit2">
                    <img alt="" src="../../Pictures/unit2.JPG" style="width: 113px; height: 100px; margin:10px" />
                            </asp:TableCell>
                            <asp:TableCell>
                    <p>-</p>
                            </asp:TableCell>
                            <asp:TableCell ID="unit3" BgColor="Yellow">
                    <img alt="" src="../../Pictures/unit3.JPG" style="width: 113px; height: 100px; margin:10px" />
                            </asp:TableCell>
                            <asp:TableCell>
                    <p>-</p>
                            </asp:TableCell>
                            <asp:TableCell BgColor="Green" runat="server" ID="unit4">
                    <img alt="" src="../../Pictures/unit4.JPG" style="width: 113px; height: 100px; margin:10px"/>
                            </asp:TableCell>
                            <asp:TableCell>
                    <p>-</p>
                            </asp:TableCell>
                            <asp:TableCell BgColor="Red" ID="unit5">
                    <img alt="" src="../../Pictures/unit5.JPG" style="width: 113px; height: 100px; margin:10px" />
                            </asp:TableCell>
                            <asp:TableCell>
                    <p>-</p>
                            </asp:TableCell>
                            <asp:TableCell ID="unit6" BgColor="Yellow">
                    <img alt="" src="../../Pictures/unit6.JPG" style="width: 113px; height: 100px; margin:10px" />
                            </asp:TableCell>
                            <asp:TableCell>
                    <p>-</p>
                            </asp:TableCell>
                            <asp:TableCell BgColor="Green" runat="server" ID="unit7">
                    <img alt="" src="../../Pictures/unit7.JPG" style="width: 113px; height: 100px; margin:10px"/>
                            </asp:TableCell>
                            <asp:TableCell>
                    <p>-</p>
                            </asp:TableCell>
                            <asp:TableCell BgColor="Red" ID="unit8">
                    <img alt="" src="../../Pictures/unit8.JPG" style="width: 113px; height: 100px; margin:10px" />
                            </asp:TableCell>
                        </asp:TableRow>
                    </asp:Table>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="BoxesSlider">
                <telerik:RadSlider ID="RadSlider2" runat="server" SmallChange="1" Width="224" Value="0"
                    Orientation="Horizontal" OnClientValueChange="ScrollLine" OnClientLoaded="initWindow"
                    Skin="WebBlue" />
            </div>
        </td>
    </tr>
</table>

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

public partial class UcLineStatus : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.RadToolTipManager1.TargetControls.Clear();

        TableRowCollection rows = tblLine.Rows;

        foreach (TableRow row in rows)
        {
            TableCellCollection cells = row.Cells;
            foreach (TableCell cell in cells)
            {
                if (cell.ID != null && !cell.ID.Equals(""))
                {
                    Control temp = cell;
                    RadToolTipManager1.TargetControls.Add(temp.ClientID, cell.ID, true);
                }
            }
        }
    }

    protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
    {
        UpdateToolTip(args.Value, args.UpdatePanel);
    }

    private void UpdateToolTip(string elementID, UpdatePanel panel)
    {
        UcUnitStatus ctrl = (UcUnitStatus)Page.LoadControl("~/UserControls/UcUnitStatus.ascx");
        panel.ContentTemplateContainer.Controls.Add(ctrl);
        ctrl.UnitId = elementID;

    }
}

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UcUnitStatus.ascx.cs"
    Inherits="UcUnitStatus" %>
<asp:FormView ID="UnitView" runat="server" >
    <ItemTemplate>
        <div style="float: left; border: 1px solid #999999; margin-right: 20px; width: 160px;
            height: 220px; background-position: center; background-repeat: no-repeat; background-image: url('<%# Eval("UnitId", "Pictures/{0}.jpg") %>');">
        </div>
        <div style="float: left">
            <span class="title">Unit ID: </span>
            <asp:Label  ID="unitID" runat="server"></asp:Label>
            <br />
            <span class='title'>Status:</span>
            <asp:Label ID="status" runat="server"></asp:Label>
            <br />
            <span class='title'>Beschreibung:</span>
            <asp:Label ID="description" runat="server"></asp:Label>
        </div>
    </ItemTemplate>
</asp:FormView>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Compact.Data.Simulation;


public partial class UcUnitStatus : System.Web.UI.UserControl
{


    public string UnitId
    {
        get
        {
            if (ViewState["UnitID"] == null)
            {
                return "";
            }
            return (string)ViewState["UnitID"];
        }
        set
        {
            ViewState["UnitID"] = value;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        UnitStatus unitStatus=UnitStatusSimulation.GetUnitStatus(UnitId);


    }
}

Any suggestions why the tooltip doesn't show any content?

[Svetlina Anati]

Hello Guenter,

I already answered your other thread and for your convenienec and for others who might encounter teh same problem I pasted my reply below:

I examined your code and I think that the problem is not in the RadToolTip control but in your custom code. However, since I do not have a runnable demo, I am afraid I cannot help and we also do not support custom solution but only problems with our controls which are related to their functionality and not the scenario itself. However, I will try to give you some direction which might be helpful in solving the issue:

1. I do not know what are your custom classes but I do not see where you databind the FormView control and it is possible that you just have an empty FormView and that is why it looks like the tooltip is emty. This being said make sure that the FormView is databinded.
2. You can test whether adding the control directly to the page instead of to teh RadToolTip visualizes the control. If the control is not visible in this case, make it work on the page and then simply add it to the tooltip again - it should work there as well.
3. I believe that the problem is not in the fact that you use the ViewState but I recommend to not use it because it could cause problems in ajax scenarios. You can use a simple public property as shown in our online demos.

I hope that my explanations are helpful.

Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.