c# - 工具提示内容稍微不够宽

Question

我正在使用 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'
        }
    }
});

我希望时间能够正确对齐，但最长的名字不会像这里所看到的那样下沉。

我不知道该怎么办。

Answer 1

这是因为qtip的默认maxWidth是固定的280px

.ui-tooltip, .qtip{
    position: absolute;
    left: -28000px;
    top: -28000px;
    display: none;

    max-width: 280px;
    min-width: 50px;

    font-size: 10.5px;
    line-height: 12px;
}

您需要通过设置新样式来覆盖此默认值:

.my_custom_qtip_width {
    max-width: 1200px;
    min-width: 0px;
}

并将这个新创建的 css 类插入到 qtip 样式属性中:

style: {
    classes: 'my_custom_qtip_width'
}