方法一:
$("#Grid").kendoTooltip({
show: function(e){
if(this.content.text().length > 20){
this.content.parent().css("visibility", "visible");
}
},
hide:function(e){
this.content.parent().css("visibility", "hidden");
},
filter: "td:nth-child(10)", //this filter selects the first column cells
position: "center",
content: function(e){
var dataItem = $("#Grid").data("kendoGrid").dataItem(e.target.closest("tr"));
var content = dataItem.errorMsg;
return content;
}
}).data("kendoTooltip");
方法二:
<!--设置tooltip的样式-->
<style>
div[role=tooltip].k-tooltip{
padding: 2px;
background: #5c9acf;
}
.k-tooltip-content{
padding: 4px;
text-align: left;
background: #fff;
color: #666;
}
.k-callout {
border-bottom-color: #5c9acf;
}
</style>
//数据太长不换行,移动到上边的时候显示框
attributes:{style: "white-space:nowrap;text-overflow:ellipsis;"},
方法三:
//add tooltip
$("#Grid").kendoTooltip({
show: function(e){
if($.trim(this.content.text()) !=""){
$('[role="tooltip"]').css("visibility", "visible");
}
},
hide: function(){
$('[role="tooltip"]').css("visibility", "hidden");
},
filter: "td:nth-child(n+3)",
content: function(e){
var element = e.target[0];
if(element.offsetWidth < element.scrollWidth){
var text = $(e.target).text();
return '<div style="min-width:100px;max-width: 1000px;">' + text + '</div>';
}else{
$('[role="tooltip"]').css("visibility", "hidden");//解决鼠标一开始放在上面出现空模块
return "";
}
}
}).data("kendoTooltip");