当行数据过长，超出的数据变为“ … ” 。鼠标移动到单元格上，会把行中的所有数据呈现出来...

方法一：

$("#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");

转载于:https://www.cnblogs.com/chengshixiaonongming/p/10372767.html