Tooltip opens in the wrong place when the marker is clicked and then corrects itself when the marker is clicked a second time.

[Stephen]

function create_markers_array_from_data (oData) {

            var max = oData.length,

                i = 0,

                markers_array = [];

 

                for(; i < max; i++) {

                    markers_array.push({

                        location: [oData[i].lat, oData[i].long],

                        tooltip: {

                            template: "<div class='current_map_tooltip_container'><div id='wx-map-target"+oData[i].title+"'      class='"+oData[i].content+"'></div></div>"

                        }

                    });

                }

 

                return markers_array;

        }


I'm initializing a custom kendo widget into the tooltip.... The demo works as expected with text but I'm having an issue with the tooltip not opening in the correct place first time. The first time I click a marker the tooltip opens infront of the marker obscuring it, when I close the tooltip and click on the marker again It opens in the correct place (above the marker). 

I assumed I could put anything I want into the tooltip markup but I'm obviously getting something wrong.. .can you recommend a solution that I could try (css or js) that may make the tooltip open in the correct place first time (and every time). 

My initial thoughts are... because I'm initializing a widget using $('#widget').kendoMyCustomWidget(); on the marker being clicked the width and height may not be being taken into account first time round and on the second opening somethings happened that means the width and height is accounted for.

I am experimented with giving the .k-tooltip-closable a  min-width and min-height but this does not seem to have an effect.



Any thoughts on where I'm going wrong would be much appreciated thanks.

Stephen

[Stephen]

Here is another code snippet:

setTimeout(function() {
        $('.k-layer .k-marker-pin-target').click(function() {
            if($('.k-tooltip').is(':visible')) {
                create_widget(extracted_data,
                $('.k-tooltip:visible').find('.current_map_tooltip_container > div').attr('class'));
            }
        });
        }, 2000);

[T. Tsonev]

Hi,

This indeed looks like a timing issue. The position of the tooltip is calculated before the final size is set.
This might very well be a bug and we'll investigate.

My suggestion for the moment is to set tooltip.width and tooltip.height in advance. This might be a problem if the size of the custom widget is not known.
   map.markers.add({
      location: [0, 0],
      tooltip: {
        template: "<div class='marker-content'></div>",
        height: 100,
        width: 100
      }
    });

-- Live demo --

Please, let me know if using widgets with dynamic size is a requirement.

Regards,
T. Tsonev
Telerik

[eliraz]

Hi,
I'm experiencing this issue also.
Your suggestion doesn't work because the position of the tooltip and the callout is wrong.
Is there any solution already?

Thanks

[T. Tsonev]

Hello,

I'm not sure that we're discussing the same issue.

Can you please elaborate in a separate thread? Sample code will be highly appreciated.

Regards,
T. Tsonev
Telerik