grid列内容省略,鼠标悬停样式修改

//css样式
<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>
//绑定grid修改样式
//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 "";
            }

        }
    });

 

posted @ 2019-10-15 14:49  群鸽乱舞  阅读(411)  评论(4编辑  收藏  举报