Create Marker Per Shape

9 posts, 1 answers
  1. Joe
    Joe avatar
    5 posts
    Member since:
    Dec 2010

    Posted 09 Jan 2014 Link to this post

    Is there a way to dynamically create a marker and tooltip per shape utilizing the onShapeCreated, onShapeMouseEnter and onShapeMousteLeave events to create,show and hide the tooltip?
  2.
  3. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 13 Jan 2014 Link to this post

    Hi,

    Markers can be created dynamically using the following syntax:

    function shapeCreated(e) {
        e.sender.markers.add({
            location: [0, 0],
            tooltip: {
               content: "Foo",
               showOn: "mouseenter",
               autoHide: true
           }
       });
    }

    There's no need to handle onShapeMouseEnter, onShapeMouseLeave separately.
    All marker options are supported by the add method.

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Joe
    Joe avatar
    5 posts
    Member since:
    Dec 2010

    Posted 13 Jan 2014 Link to this post

    What I'm looking to do is create a tooltip per shape and not have to know the latitude and longitude of the shape.
  7. Answer
    Joe
    Joe avatar
    5 posts
    Member since:
    Dec 2010

    Posted 15 Jan 2014 Link to this post

    Hi,

    Right, I see what you mean now. I guess we can use the Popup component and show it on demand as the user hovers the shapes.
    The Popup is the base component for the Window and Tooltip components and is not public itself. That said, its API is stable and will be published soon.

        shapeMouseEnter: function(e) {
            var oe = e.originalEvent;
            var x = oe.pageX || oi.clientX;
            var y = oe.pageY || oi.clientY;

            var name = e.shape.dataItem.properties.name;
            popup.element.html(name);

            popup.open(x, y);
        },
        shapeMouseLeave: function(e) {
            if (!$(e.originalEvent.relatedTarget).is(".k-popup, .k-animation-container")) {
                popup.close();

                // Necessary to stop the animations,
                // will be fixed in future versions
                popup.element.kendoStop(true, true);
            }
        }

    Live demo

    Note that we're specifically checking if the mouse is moved over the popup. It shouldn't be closed in this case.

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Joe
    Joe avatar
    5 posts
    Member since:
    Dec 2010

    Posted 15 Jan 2014 Link to this post

    Thanks, this worked great.  I was doing something similar with custom tooltips that I then dynamically positioned using the original event.  The popup solution is a lot cleaner.

    Thanks again!
  11. Jake
    Jake avatar
    5 posts
    Member since:
    Oct 2015

    Posted 18 Oct 2015 Link to this post

    This is still working!!!!!! Thanks!
  13. Jake
    Jake avatar
    5 posts
    Member since:
    Oct 2015

    Posted 18 Oct 2015 Link to this post

    I am not sure if this is the proper way to implement it at this time since this forum is 5 years ago. But it is working...
  14.
  15. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 21 Oct 2015 Link to this post

    Hello,

    Yes, this is what we recommend for the moment. I've uploaded this snippet as a how-to article and we'll keep it up to date.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  17. Jake
    Jake avatar
    5 posts
    Member since:
    Oct 2015

    Posted 21 Oct 2015 in reply to T. Tsonev Link to this post

    Tnx Tsonev!
Back to Top