This is a migrated thread and some comments may be shown as answers.

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

4 Answers 121 Views
Map
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Stephen
Top achievements
Rank 1
Stephen asked on 25 Feb 2014, 04:09 PM
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


4 Answers, 1 is accepted

Sort by
0
Stephen
Top achievements
Rank 1
answered on 25 Feb 2014, 04:27 PM
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);

0
T. Tsonev
Telerik team
answered on 27 Feb 2014, 03:56 PM
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
0
eliraz
Top achievements
Rank 1
answered on 19 May 2014, 10:28 AM
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
0
T. Tsonev
Telerik team
answered on 20 May 2014, 02:05 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Map
Asked by
Stephen
Top achievements
Rank 1
Answers by
Stephen
Top achievements
Rank 1
T. Tsonev
Telerik team
eliraz
Top achievements
Rank 1
Share this question
or