customize shape of kendo tooltip

Question

I would like to customize the shape of Kendo Tooltips for a grid.
I saw the example on kendo site, it has the arrow outside the box, and the box has a nice rounded shape. Working on css, using .k-tooltip I can change width, height, background. But I get a square box with the arrow inside which sometimes overrides part of the text content.
I thought that callout would help but I was not able to get anything.
How can I change shape, image and position of the arrows, shape of the box ?
Moreover, how can I trigger the tooltip only when part of the text in a grid cell is visible ?
Thanks a lot for any hint

regards

Marco

Answer 1

I think "arrow" you mean callout. You can turn off callout by:

$(document).ready(function() {
  $("#target").kendoTooltip({
    callout: false
  });
});

About your question "Moreover, how can I trigger the tooltip only when part of the text in a grid cell is visible?"

If I understand you correctly you would like to show tooltip only when there is text with ellipsis (partially visible in the cell), but you don't want to show a tooltip if there is a full text is visible or if there is no text in the cell. If that is the case, you can do this way:

function initializeTooltip(element, filter) {
    return element.kendoTooltip({
        autoHide: true,
        filter: filter,
        callout: false,
        content: function (e) {
            var target = e.target,
                tooltip = e.sender,
                tooltipText = "";

            if (isEllipsisActive(target[0])) {
                tooltipText = $(target).text();
            }

            tooltip.popup.unbind("open");

            tooltip.popup.bind("open", function (arg) {
                tooltip.refreshTooltip = false;

                if (!isEllipsisActive(target[0])) {
                    arg.preventDefault();
                } else if (tooltipText !== $(target).text()) {
                    tooltip.refreshTooltip = true;
                }
            });

            return tooltipText;
        },
        show: function () {
            if (this.refreshTooltip) {
                this.refresh();
            }
        }
    }).data("kendoTooltip");
};

// determanes if text has ellipsis
function isEllipsisActive(e) {
    return e.offsetWidth < e.scrollWidth;
}

$(function () {
    initializeTooltip($("#yourGridId"), ".tooltip");
});

tooltip in this case is class name of the column that you would like to use tooltip for, but you can call that class anyway you wish. In case if you are using Kendo ASP.NET MVC it will look something like this

      c.Bound(p => p.ClientName)
          .Title("Client")
          .HtmlAttributes(new {@class = "tooltip"});