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

Thread is closed for posting
5 posts, 0 answers
  1. Stephen
    Stephen avatar
    11 posts
    Member since:
    Feb 2013

    Posted 25 Feb 2014 Link to this post

    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


  2. Stephen
    Stephen avatar
    11 posts
    Member since:
    Feb 2013

    Posted 25 Feb 2014 Link to this post

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

  3. Kendo UI is VS 2017 Ready
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 27 Feb 2014 Link to this post

    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
  5. eliraz
    eliraz avatar
    20 posts
    Member since:
    Nov 2010

    Posted 19 May 2014 in reply to T. Tsonev Link to this post

    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
  6. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 20 May 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready