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

More than one tooltip in one page

1 Answer 88 Views

ToolTip

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

Vincent asked on 18 Nov 2010, 09:57 PM

Hi Telerik Team

I have more than one tooltip control in one page, and our application requires to display all fields error and automatically popup after user submit the page. we set the VisibleOnPageLoad = true, but unfortunately, it only auto display the last tooltip.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TooltipsTest.aspx.cs" Inherits="TooltipsTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<div style="padding-top:5px;">

<telerik:RadComboBox ID="rcbFolders" EnableEmbeddedSkins="false" Skin="Smartmail" runat="server" Width="315px" DataTextField="CampaignFolderName" DataValueField="CampaignFolderID">

</telerik:RadComboBox>

<asp:TextBox ID="txtFolderName" runat="server" Width="300px" Visible="false" MaxLength="255"></asp:TextBox>

<img runat="server" class="RedAlertImage" id="imgWarnFolderNameInUse" visible="false" src="redalert.gif"/>

<telerik:RadToolTip ID="RadToolTip1" VisibleOnPageLoad="false" runat="server" Position="BottomLeft" TargetControlID="imgWarnFolderNameInUse">

<div><asp:Label ID="lblFolderNameError" runat="server" Text="">sadfdsafsadfadsfdsafdsa</asp:Label></div>

</telerik:RadToolTip>

</div>

<div style="padding-top:5px;">

<asp:TextBox ID="txtCampaignEmailName" runat="server" Width="300px" MaxLength="50"></asp:TextBox>

<img runat="server" class="RedAlertImage" id="imgWarnCampaignNameInUse" visible="false" src="redalert.gif"/>

<telerik:RadToolTip ID="RadToolTip2" VisibleOnPageLoad="false" runat="server" Position="BottomLeft" TargetControlID="imgWarnCampaignNameInUse">

<div><asp:Label ID="lblEmailNameError" runat="server" Text="Email name must be unique within a campaign folder"></asp:Label></div>

</telerik:RadToolTip>

</div>

<div>

<asp:Button Text="Show" runat="server" ID="showme" />

</div>

</form>

</body>

</html>

codebehind

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

public partial class TooltipsTest : System.Web.UI.Page

{

protected void Page_Init(object sender, EventArgs e)

{

showme.Click += new EventHandler(showme_Click);

}

protected void showme_Click(object sender, EventArgs e)

{

imgWarnFolderNameInUse.Visible = true;

imgWarnCampaignNameInUse.Visible = true;

RadToolTip1.VisibleOnPageLoad = true;

RadToolTip2.VisibleOnPageLoad = true;

}

protected void Page_Load(object sender, EventArgs e)

{

}

1 Answer, 1 is accepted

answered on 19 Nov 2010, 10:23 AM

Hello Vincent,

Only a single tooltip might be visible at any given time. This behavior is by design and will not be changed as changing it would defy the purpose of the control.

The purpose of a tooltip is to provide additional information for a given element. It is not meant to be used as a popup control or as a draggable panel. For this purpose we provide RadWindow and RadDock controls. Both of these controls allow more than one visible element of the kind on the page.

Our suggestion is to consider using RadWindow and RadDock controls or you can use a summarize all errors as show in the demo below:

http://demos.telerik.com/aspnet-ajax/tooltip/examples/clientsideapi/defaultcs.aspx

Greetings,
Svetlina
the Telerik team

Browse the vast support resources we have to jumpstart 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.