How to increase vertical offset of tooltip position?

Question

I'm using kendo tooltips on a graphic (within an anchor link) which is 24px tall. Accordingly, when the tooltip shows up (default position of bottom), it covers the bottom third of the graphic and so the bottom third of the graphic can't be clicked.

I can do the following:

.k-tooltip {
    margin-top: 8px;
}

But the problem with this is that if the tooltip is on a graphic at the bottom of the page, the position will be "top" instead of "bottom" but it'll now be covering about 1/2 the graphic instead of just a third because it's still being pushed down by 8px.

What I'd like is if the position is bottom, then the margin-top is 8px, but if the position is top, the the margin-bottom is 8px.

Thanks for any help you can provide!

Billy McCafferty

Answer 1

Would this one help you? http://dojo.telerik.com/amoZE/5

var tooltip = $("#demo").kendoTooltip({
  filter: "a",
  show: function (e) {
    var position = e.sender.options.position;
    if (position == "bottom") {
      e.sender.popup.element.css("margin-top", "10px");
    } else if(position == "top") {
      e.sender.popup.element.css("margin-bottom", "10px");
    }
  }
}).data("kendoTooltip");

Answer 2

Thank you for your answer, jarno-lahtinen. It was very helpful! Two problems came up with it and I would like to document the solutions here:

1. Property Error in Typescript

I am using TS and it gave me the following error: "Property popup does not exist on type Tooltip" for e.sender.popup. I am not sure if this is due to a newer version of Kendo, or of missing type definitions.

Solution:

you can use this.popup instead.

2. Not working for position: "top"

Unfortunately, the "margin-bottom" has absolutely no effect because the popup is positioned "absolute" using top/left.

Solution:

this.popup.element.css("margin-top", "-10px"); 

This will shift the popup upwards by 10 pixels