在easyui的tree的節點上加入鼠標懸浮提示信息

在tree的onLoadSuccess加入下面的代碼便可:

onLoadSuccess:function(){  
     $(".tree-title").tooltip({
	    position: 'right',
	    content: '<span style="color:#fff" class="__tooltip"></span>',
	    onShow: function(){
	    	var tree_title = this;
            //設定提示框中的信息爲節點中的內容
	    	$('.__tooltip').text(tree_title.innerText);
			$(this).tooltip('tip').css({
				backgroundColor: '#666',
				borderColor: '#666'
    		});
    	}
    });
 }

效果:

若是在html元素中加入信息提示框:

例如在html的select元素的選項option中加入提示框,能夠這麼作:

$(function({
   setTimeout(function(){
		showToolTip();
	},10);
}));

function showToolTip(){
	var options = $('#FormulasList').find('option');
	options.tooltip({
		    position: 'right',
		    content: '<span style="color:#fff" class="__tooltip"></span>',
		    onShow: function(){
		    	var value = $(this).text();
		    	//設定提示框中的信息爲節點中的內容
		    	$('.__tooltip').text(value);
		    	$(this).tooltip('tip').css({
		    		backgroundColor: '#666',
		    		borderColor: '#666'
			});
		}
	});
}
//上面這種寫法是在全部的options中加上懸浮提示信息,若是須要判斷當options的值到達必定長度後再顯示提示消息能夠這麼作:
function showToolTip(){
	var options = $('#FormulasList').find('option');
	options.each(function(){
		var value = $(this).text();
		if(value.length>12){
			$(this).tooltip({
				position: 'right',
				content: '<span style="color:#fff" class="__tooltip"></span>',
				onShow: function(){
					//設定提示框中的信息爲節點中的內容
					$('.__tooltip').text(value);
					$(this).tooltip('tip').css({
						backgroundColor: '#666',
						borderColor: '#666'
					});
				}
			});
		}
	});
}

效果: