Create Marker Per Shape

[Joe]

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?

[T. Tsonev]

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

[Joe]

What I'm looking to do is create a tooltip per shape and not have to know the latitude and longitude of the shape.

[T. Tsonev]

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

[Joe]

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!

[Jake]

This is still working!!!!!! Thanks!

[Jake]

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...

[T. Tsonev]

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

 

 

[Jake]

Tnx Tsonev!