0

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

私が望むのは、時間を正しく揃えることですが、ここに見られるように、最も長い名前の名前が沈み込まないようにすることです.

どうすればいいのかわからない。

4

2 に答える 2

2

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'
}
于 2013-04-03T16:53:41.153 に答える