Tooltips for Shapes

You can implement a tooltip on hover for the Drawing shapes by using the Popup component.

To toggle (show or hide) the tooltip, use the mouseenter and mouseleave events of the Surface.

import { Image, Surface, Path, Text, Group, geometry } from '@progress/kendo-drawing';
const { Rect, Point, Size, transform } = geometry;

export function drawScene(surface) {
    const rect = new Rect([ 0, 20 ], [ 100, 50 ]);
    const path = Path.fromRect(rect, {
        stroke: {
            color: '#ffffff',
            width: 1
        },
        fill: { color: '#ff0000' },
        cursor: 'pointer',
        tooltipContent: 'Foo'
    });

  // Place all the shapes in a group
    const group = new Group();
    group.append(path);

  // Rotate the group
    group.transform(
    transform().rotate(-20, [ 150, 25 ])
  );

  // Render the group on the surface
    surface.draw(group);
}
In this article
 /