tooltip提示控制項

這些天忙於公司專案的改版就很少來這裡發表文章了，今天趁著週末休息給大家分享乙個jquery提示控制項。可用於顯示載入提示、錯誤提示、操作提示等。

先上張預覽圖：

提示條樣式可以自己定義，支援關閉**和鎖屏，自適應居中，採用fixed定位（暫未考慮相容ie6）。

下面是原始碼：(注：引入該js時放在body內，不然沒效果，原因不明。)

/*

* * tooltip提示
* @author newton---承諾ン祗愛
* @date 2023年04月19日晚
* @update 2023年04月23日重構，保證乙個例項的關閉函式只能觸發自身的關閉事件，加入動畫緩動支援。
* @param object{}
* @type string tip: '', 提示內容，支援傳入html。
* @type number time: 3, 自動關閉時間，以秒計時。
* @type boolean lock: false, 鎖屏。
* @type string easing: 'linear' 動畫緩動效果，需要緩動外掛程式支援。
* @type string maskcolor: '#000', 鎖屏顏色。
* @type number maskopacity: .3, 鎖屏透明度。
* @type number fxspeed: 300, 動畫速度，不建議設定過大，以毫秒計時。
* @type number index: 999999,  z-index值。
* @type function afterclose: $.noop 關閉後**。 */
(function ($);
//介面
var tooltip =function (config)
this.config =$.extend({}, defaults, config);
this.config.time = this.config.time * 1000
;        
this
._initialize();
return
this
;    };
//原型方法
tooltip.prototype =);
this
._togglemask();
tootipinner.html(
this
.config.tip);
//平滑首次動畫效果
if(fistinit) 
this
._slidedown();
},//鎖屏
_locked: function (),
//關閉鎖屏
_unlocked: function (),
//顯示隱藏鎖屏
_togglemask: function () 
else
},//提示條滑下
_slidedown: function (), 
this.config.fxspeed, this
.config.easing, function ());
},//提示條收起
_slideup: function (), 
this.config.fxspeed, this
.config.easing, function ());
},//自動關閉
_autoclose: function (), 
this
.config.time);
},//關閉介面
close: function ()
};//公開介面
window.tooltip =tooltip;
})(jquery);

tooltip(

});

ToolTip控制項

tooltip控制項是乙個簡單，但非常有用的控制項。它能夠為我們的軟體提供非常漂亮的提示資訊，提高軟體的可用性，給使用者比較好的體驗。假設現在有兩個按鈕，乙個用來預覽吊線世系圖，乙個用來預覽行轉。為了保持按鈕文字的簡潔，以及為按鈕尺寸所限。我們不能可能把這個按鈕的主要功能通過text屬性表述清楚，這...

CSS 提示工具 Tooltip

以下例項中，提示工具顯示在指定元素的右側 left 105 注意 top 5px 同於定位在容器元素的中間。使用數字 5 因為提示文字的頂部和底部的內邊距 padding 是 5px。如果你修改 padding 的值，top 值也要對應修改，這樣才可以確保它是居中對齊的。tooltip toolti...

WPF 工具提示（ToolTip）

wpf的工具提示實現方法如下 1 簡單的工具提示只需設定元素的tooltip屬性 example button margin 20 grid.row 2 tooltip this is a button another button button 2 複雜的工具提示需要使用更複雜的巢狀內容設定too...