Positioning issue with kendo ui tooltip inside a grid

Question

I have a problem with kendoui tooltip inside a grid cell. In the grid I display a simple documents folder. Each row lists a file. In the first column i have a small preview icon and a download link for the image or file. If I hover an image the tooltip is called.

Example:

<a class="documents has_preview" href="<my_download_path>" title="<my_image_title>" data-url="<my_preview_image_path>">
<span class="icon preview_image image jpg has_image">
    <img src="<my_preview_icon_path>" border="0" alt="" />
</span>
<my_image_name>

The tooltip is inserted like:

<script id="template" type="text/x-kendo-template">
    <img src="#=target.data('url')#" alt="#=target.data('title')#" />
    <p>#=target.data('title')#</p>
</script>

$("#grid").kendoTooltip({
    filter: "a.has_preview",
    content: kendo.template($("#template").html()),
    position: "top"
});

Problem is:

If I hover the image name for the first time, the tooltip wont't be displayed at the specified position. On a second hover of the same image name everything is displayed correctly...

Can anyone give me a hint what to do?

Thanks a lot! Philip

Answer 1

We were able to fix it by setting position to "left".