一、class加載方式
<span id="pos" class="easyui-tooltip" title="這是提示內容">內容</span>
二、js加載方式
$("#pos").tooltip({
//屬性
content:'<strong>這是內容提示框</strong>', //消息框內容,識別html標簽,默認為 null,值為string
position:'bottom', //消息框位置。left/right/top/bottom 默認 bottom,值為string
trackMouse:true, // 允許提示框跟隨鼠標移動, 默認為false,值為 boolean
deltaX:100, //水平方向提示框的位置。默認為 0,值為 number
deltaY:20, //垂直方向提示框的位置。默認為 0,值為 number
showDelay:1000, //延時多少秒顯示提示框。默認 200,值為 number
hideDelay:1000, //延時多少秒隱藏提示框。默認 100,值為 number
//showEvent:'click',//當激活事件的時候顯示提示框,默認為 mouseenter,值為string
//hideEvent:'dblclick',// 當激活事件的時候顯示提示框,默認為 mouseleave ,值為string
//事件
onShow : function (e) {
console.log($('#pos').tooltip('tip'));//返回 tip 元素對象,傳參none
console.log($('#pos').tooltip('arrow'));//返回箭頭元素對象,傳參none
}, //在顯示提示框的時候觸發,傳參為e
onHide : function (e) {}, //在隱藏提示框的時候觸發,傳參為e
onUpdate :function (content) {
alert("內容改變為"+content)
},//在提示框內容更新的時候觸發,傳參為content
//onPosition:function (left,top) {
//console.log('left:' + left + ',top:' + top);
// },//在提示框位置改變的時候觸發,傳參 left、top
onDestroy:function () {},// 在提示框被銷毀的時候觸發,傳參none
// onShow : function(e) {
// $('.tooltip-right').css('left', 500);
// },
// onHide : function (e) {
// $('#pos').tooltip('reposition');//重置工具欄位置
// }
});
//方法
$("#pos").click(function () {
// $(this).tooltip("update","<strong>這是內容提示框</strong>");
$(this).tooltip("destroy");
});
console.log($('#pos').tooltip('options'));//返回屬性對象,傳參none
//$('#pos').tooltip('show');//顯示提示框,傳參為e
//$('#pos').tooltip('hide');//隱藏提示框,傳參為e
//$('#box').tooltip('destroy');//銷毀提示框,傳參none
//$('#box').tooltip('update', '更新提示內容');//更新content內容