Tooltip content is slightly not wide enough

Question

I am using QTip2 to show a tooltip:

The tooltip's content is made like this:

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

The styles are:

.hour-data
{
    display:inline;
    float:right;
}
.hour-title
{
    display:inline;
}

And the QTip is made like this:

$(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'
        }
    }
});

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.

Answer 1

It's because default maxWidth of qtip is fixed 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;
}

You need to override this default value by set up a new style:

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

and insert this newly created css class inside qtip style attribute:

style: {
    classes: 'my_custom_qtip_width'
}