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

did you figure this out? I have a very similar issue I am dealing with... — t1nr2y, Jul 23 '14 at 13:43
Can you help use this sample to demonstrate your issue so we can figure it out? http://dojo.telerik.com/amoZE — Burke Holland, Sep 05 '14 at 15:00
I have a similar issue but in my case I just have a hyperlink that the tooltip obscures. Luckily Billy's fix is appropriate in my case (for now at least). The below shows the problem. http://dojo.telerik.com/amoZE/2 — tony, Feb 19 '15 at 09:13

Jarno Lahtinen · Answer 1 · 2015-03-27T10:31:09.737

6

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");

edited Mar 27 '15 at 10:31

answered Mar 27 '15 at 10:15

Jarno Lahtinen

1,713
17
30

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

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

How to increase vertical offset of tooltip position?

2 Answers2

1. Property Error in Typescript

Solution:

2. Not working for position: "top"

Solution: