工具提示内容略微不够宽

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;
}

并在qtip样式属性中插入这个新创建的css类：

style: {
    classes: 'my_custom_qtip_width'
}

Answer 2

将小时标题的宽度设置为它应具有的最大宽度，您应该完成。