Feb 14, 2012, 3:21 AM
[CLOSED] Tooltip With Dynamically created content
I have a page that that I load a list of contacts into a display field. I wrap a span around each contact and then would like to assign a tooltip to each span. How can I make sure the tooltip is positioned next to the item? The example below works, but the tooltip shows up above and not to the right. This is due to the css positioning that is used in the css class called status-icon, which I pulled from your examples. How could I do this dynamically?
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack && !X.IsAjaxRequest)
{
pnlForm.Title = "A test";
lblNumber.Text = "000001";
txtBody.Text = "This is a test";
txtSubject.Text = "A test";
btnCancel.Visible = false;
btnDelete.Visible = true;
LoadRequestors();
}
}
public void LoadRequestors()
{
int count = 0;
List<string> requestors = new List<string>();
{
string spanid = string.Format("sp_{0}", 1);
requestors.Add(count > 0 ?
" <span id='" + spanid + "'>" + "Johnny Tester" + "</span>" :
"<span id='" + spanid + "'>" + "Johnny Tester" + "</span>");
//Add a tooltip
ToolTip tip = new ToolTip();
tip.ID = "tt_" + spanid;
tip.Target = spanid;
tip.Title = "Contact Info";
tip.Anchor = "Left";
tip.Width = new Unit(200, UnitType.Pixel);
tip.AutoHide = false;
tip.Closable = true;
tip.Delegate = "span";
ContactInfoTemplate template = new ContactInfoTemplate();
template.MyContact = new Contact() { DisplayName = "Johnny Tester", Phone = "770-990-8765", Email = "test@testing.com" };
template.ElementId = spanid;
tip.Content = template;
this.Controls.Add(tip);
}
count++;
{
string spanid = string.Format("sp_{0}", 2);
requestors.Add(count > 0 ?
" <span id='" + spanid + "'>" + "Timmy Tester" + "</span>" :
"<span id='" + spanid + "'>" + "Timmy Tester" + "</span>");
//Add a tooltip
ToolTip tip = new ToolTip();
tip.ID = "tt_" + spanid;
tip.Target = spanid;
tip.Title = "Contact Info";
tip.Anchor = "Left";
tip.Width = new Unit(200, UnitType.Pixel);
tip.AutoHide = false;
tip.Closable = true;
tip.Delegate = "span";
ContactInfoTemplate template = new ContactInfoTemplate();
template.MyContact = new Contact() { DisplayName = "Timmy Tester", Phone = "770-584-8765", Email = "test@gmail.com" };
template.ElementId = spanid;
tip.Content = template;
this.Controls.Add(tip);
}
string toReturn = String.Empty;
requestors.ForEach(s => toReturn += s + ";");
lblRequestor.Text = toReturn.TrimEnd(';');
}
public class ContactInfoTemplate : ITemplate
{
public Contact MyContact { get; set; }
public string ElementId { get; set; }
public void InstantiateIn(Control container)
{
// load controls
Literal lit = new Literal();
lit.Text = @"
<div id='content-tip_" + ElementId + @"'>
<strong>" + MyContact.CompanyName + @"</strong>
<table padding='2'>
<tr>
<td>Phone 1:</td>
<td><a href='javascript:parent.Ext.net.DirectMethods.createPhoneCall(" + MyContact.ContactId.ToString() + "," + MyContact.ContactObjectTypeId.ToString() + ")'>" + MyContact.Phone + @"</a></td>
</tr>
<tr>
<td>Email:</td>
<td><a href='javascript:parent.Ext.net.DirectMethods.createEmail(" + MyContact.ContactId.ToString() + "," + MyContact.ContactObjectTypeId.ToString() + ")'>" + MyContact.Email + @"</a></td>
</tr>
<tr>
<td>Email 2:</td>
<td><a href='javascript:parent.Ext.net.DirectMethods.createEmail(" + MyContact.ContactId.ToString() + "," + MyContact.ContactObjectTypeId.ToString() + ")'>" + MyContact.Email2 + @"</a></td>
</tr>
</table>
</div>";
container.Controls.Add(lit);
}
}
public class Contact
{
public string DisplayName { get; set; }
public string Email { get; set; }
public string Email2 { get; set; }
public string CompanyName { get; set; }
public string Phone { get; set; }
public int ContactId { get; set; }
public int ContactObjectTypeId { get; set; }
public Contact()
{
}
}
</script>
<!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 id="Head1" runat="server">
<title>Testing</title>
<style type="text/css">
/* Tooltip Styles */
#content-anchor-tip ul
{
float: left;
width: 200px;
list-style-type: disc;
margin-left: 15px;
}
.ext-ie #content-anchor-tip ul
{
margin: 0;
padding-left: 15px;
}
#content-anchor-tip .thumb
{
float: right;
}
#content-anchor-tip .status-icon
{
position: absolute;
top: 4px;
right: 50px;
padding: 0;
line-height: 0;
}
#content-anchor-tip a:link, #content-anchor-tip a:visited
{
color: #339;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray">
</ext:ResourceManager>
<ext:FormPanel ID="pnlForm" runat="server" Layout="FormLayout" Padding="5" Border="false" MonitorValid="true" Icon="Page" Collapsible="true" AutoScroll="true" Height="450">
<Defaults>
<ext:Parameter Name="msgTarget" Value="side" Mode="Value">
</ext:Parameter>
</Defaults>
<TopBar>
<ext:Toolbar ID="tbRibbon" runat="server">
<Items>
<ext:Button ID="btnEdit" runat="server" Text="Edit Ticket" IconAlign="Left" Icon="TableEdit">
</ext:Button>
<ext:Button ID="btnSaveClose" runat="server" Text="Save Ticket" IconAlign="Left" Icon="Disk">
</ext:Button>
<ext:Button ID="btnCancel" runat="server" Text="Oops! Cancel" IconAlign="Left" Icon="Stop">
</ext:Button>
<ext:Button ID="btnDelete" runat="server" Text="Delete Ticket" IconAlign="Left" Icon="Delete">
</ext:Button>
<ext:Button ID="btnAttachFile" runat="server" Text="Attach File" IconAlign="Left" Icon="Attach">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:TextField ID="txtSubject" runat="server" FieldLabel="Subject" Width="600" AllowBlank="false">
</ext:TextField>
<ext:Label ID="lblNumber" runat="server" FieldLabel="Ticket Number">
</ext:Label>
<ext:DisplayField runat="server" ID="lblRequestor" FieldLabel="Requestor(s)">
</ext:DisplayField>
<ext:HtmlEditor ID="txtBody" runat="server" FieldLabel="Body" Width="600">
</ext:HtmlEditor>
</Items>
</ext:FormPanel>
</form>
</body>
</html>
Last edited by Daniil; Feb 14, 2012 at 2:26 PM.
Reason: [CLOSED]
Originally Posted by Daniil
