Paigomaimmado
New Member
I am using QTip2 to show a tooltip:
The tooltip's content is made like this:\[code\] public string GetHours() { DateTime d = Convert.ToDateTime(Request.Form["date"]); Bump b = new Bump(); string r = ""; var emps = ResourceManager.GetAllEmployees().OrderBy(p => p.EmployeName); foreach (Employee e in emps) { var scheds = b.GetAllToday(d,e.EmployeID, null); decimal hours = b.GetHours(scheds, d); hours = GetDayHours() - hours; string hrs = Time.Hours(Math.Abs(hours)); if (hours < 0) { hrs = "<b>-" + hrs + "h" + "</b>"; } else { hrs += "h"; } r += "<div class=\"hour-content\">"; r += "<div class=\"hour-title\">"; r += e.EmployeName + ": "; r += "</div>"; r += "<div class=\"hour-data\">"; r += hrs; r += "</div>"; r += "</div>"; } JavaScriptSerializer js = new JavaScriptSerializer(); string strJSON = js.Serialize(Server.HtmlDecode(r)); return strJSON; }\[/code\]The styles are:\[code\].hour-data{ display:inline; float:right;}.hour-title{ display:inline;}\[/code\]And the QTip is made like this:\[code\] $(this).qtip({ content: { text: 'Loading...', // The text to use whilst the AJAX request is loading ajax: { url: 'CalendarServices.aspx/GetHours', // URL to the local file type: 'POST', // POST or GET data: 'date=' + date } }, position: { target: 'mouse' }, // show: { event: 'click' }, hide: { event: 'mousedown mouseleave' }, style: { padding: 5, color: 'black', textAlign: 'left', border: { width: 1, radius: 3 }, classes: { tooltip: 'ui-widget', tip: 'ui-widget', title: 'ui-widget-header', content: 'ui-widget-content' } } });\[/code\]What I would like is for the hours to align right but such that the longest name's one does not sink down as can be seen here.I'm not sure what to do.