0

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

cortomaltese_marcof
  • 165
  • 1
  • 6
  • 16

1 Answers1

3

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"});
Vlad Bezden
  • 83,883
  • 25
  • 248
  • 179
  • awesome answer. qq: you are determining if ... is shown using offsetwidth vs scrollWidth, is that exactly how css determines whether to show the ellipsis? Just curious. Thanks! To be clear, I'm using overflow: hidden; and text-overflow: ellipsis; to show my ellipsis in my grid – snuggles Apr 29 '14 at 15:52
  • Also, I'm a little unclear on what you are doing with the 'refreshTooltip'. If I follow the logic, you first set tooltipText to '', then you set it to the text of the cell you are hovering over if ... is present. But then you check to see if it's set to '' again, and if it is, you refresh the tooltip? What purpose does this checking serve, sorry if I'm being dense, but I stripped out all that and it seems to be working ok, but maybe I'm missing something. Thanks very much! – snuggles Apr 29 '14 at 16:15
  • @snuggles. To be honest I don't know if how CSS determines whether to show the ellipsis, but that logic how I found to determine if there are ellipsis and it works great all the time :) – Vlad Bezden Apr 29 '14 at 18:15
  • @snuggles to answer your second question. Yes, it's little bit complicated because the way tooltip works. Basically you have 3 events (show, open, and context). Context is called when you refresh your tooltip, because it needs to get new context for tooltip, but it's called once for that cell, when you mouse over. So if you change value of the cell, it still will show original content in tooltip, so what you need to do is to bind tooltip to "open" event, now every time tooltip will show up it will check if there is a new content and recheck width of content and if it needs to be refreshed – Vlad Bezden Apr 29 '14 at 18:58
  • Ah, gotcha--that makes sense, and it's something I would have gotten bitten by later down the line. Thank you! As far as the css, I've found that it works allllmost perfectly but there is a threshold where the ellipsis will show but the tooltip is not triggered. I'm going to mess with it, but it's not a big deal. Cheers! – snuggles Apr 29 '14 at 23:46