ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- 工具提示 ( ToolTip )

工具提示一般使用在控制項上，並描述此控制項的用途，對於用戶來說，會使得介面更友善，且不會占用網頁版面，可以說是一舉兩得的功能。

接下來我們就針對 Button 來做 ToolTip 的介紹。

buttons: [{
    text: 'Send',
    id: 'buttonId',
    // button 按下動作
    handler: function () {

    }
}, {
    text: 'Cancel'
}]

執行後如圖示

基本設定

new Ext.ToolTip({
    // 目標 ID
    target: 'buttonId',
    html: '按下儲存表單'
});

執行後如圖示

自動顯示、關閉按鈕、拖曳

new Ext.ToolTip({
    // 目標 ID
    target: 'buttonId',
    html: '按下按鈕儲存表單',
    // 是否自動隱藏，設定 true 會過一段時間會隱藏
    autoHide: false, 
    // 顯示關閉按鈕
    closable: true,
    // 可否拖拉
    draggable: true
});

執行後如圖示

最大寬度、最小寬度

new Ext.ToolTip({
    // 目標 ID
    target: 'buttonId',
    html: '按下按鈕儲存表單',
    maxWidth: 100
});

執行後如圖示

new Ext.ToolTip({
    // 目標 ID
    target: 'buttonId',
    html: '按下按鈕儲存表單',
    minWidth: 200
});

執行後如圖示

跟隨滑鼠、延遲顯示、延遲隱藏、顯示時間

new Ext.ToolTip({
    // 目標 ID
    target: 'buttonId',
    html: '按下按鈕儲存表單',
    // 跟隨滑鼠移動
    trackMouse: true,
    // 延遲顯示 ( 毫秒 )
    showDelay: 1000,
    // 延遲隱藏 ( true & false ) <- 此功能我還不知道怎麼使用 
    hideDelay: false,
    // 顯示時間 ( 毫秒 )
    dismissDelay: 1000
});

從 API 來的提示

建立一個 API

[HttpGet]
public string SaveToolTip(int id)
{
    string username = string.Empty;
    if (id == 1)
    {
        username = "David Kuo";
    }

    return "儲存 " + username + " 的資料";

}

而 View 端如以下設定：

new Ext.ToolTip({
    // 目標 ID
    target: 'buttonId',
    html: '按下按鈕儲存表單',
    autoLoad: {
        url: 'http://localhost:8090/api/Values/SaveToolTip',
        params: { id: "1" },
        method: 'GET'
    },

});

執行後如圖示

指定提示位置

new Ext.ToolTip({
    // 目標 ID
    target: 'buttonId',
    html: '按下按鈕儲存表單',
    // top ( 上 )、bottom ( 下 ﹞、right ( 右 )、left ( 左 )
    anchor: 'top',
    // 寬度
    width: 120,
    // 箭頭位置
    anchorOffset: 30,

});

大致上工具提示 ( ToolTip ) 的用法在上面都找得到，如果各位還有甚麼想法可以在底下分享，我會再加上去的。