QTip2 を使用してツールチップを表示しています:
ツールチップの内容は次のようになります。
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;
}
スタイルは次のとおりです。
.hour-data
{
display:inline;
float:right;
}
.hour-title
{
display:inline;
}
QTip は次のように作成されます。
$(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'
}
}
});
私が望むのは、時間を正しく揃えることですが、ここに見られるように、最も長い名前の名前が沈み込まないようにすることです.
どうすればいいのかわからない。