Components / Drawing

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 { Component, ElementRef, ViewChild } from '@angular/core';
import { AfterViewInit, OnDestroy } from '@angular/core';
import { Surface } from '@progress/kendo-drawing';

import { drawScene } from './draw-scene';

@Component({
  selector: 'my-app',
  template: `
      <div #surface></div>
      <kendo-popup [offset]="offset" [popupAlign]="popupAlign" *ngIf="show">
        {{ content }}
      </kendo-popup>
  `
})
export class AppComponent implements AfterViewInit, OnDestroy {
  @ViewChild('surface')
  private surfaceElement: ElementRef;
  private surface: Surface;

  public content: string;
  public offset: any;
  public show: boolean = false;
  public popupAlign: any = {
    horizontal: 'center',
    vertical: 'bottom'
  };

  public ngAfterViewInit(): void {
    drawScene(this.createSurface());
  }

  public ngOnDestroy() {
    this.surface.destroy();
  }

  private createSurface(): Surface {
    // Obtain a reference to the native DOM element of the wrapper
    const element = this.surfaceElement.nativeElement;

    // Create a drawing surface
    this.surface = Surface.create(element);

    // Bind to the mouseenter event
    this.surface.bind("mouseenter", (args: any) => {
      const element = args.element;
      if (element && element.options.tooltipContent) {
        const bbox = element.bbox();

        // Obtain the element offset in order to calculat the absolute position on the page
        const offset = this.surfaceElement.nativeElement.getBoundingClientRect();

        // Update the content and show the popup
        this.content = element.options.tooltipContent;
        this.show = true;

        // Set the Popup offset based on the position of the shape and the element offset
        this.offset = {
          left: bbox.center().x + offset.left,
          top: bbox.origin.y + offset.top
        };
      }
    });

    // Bind to the mouseleave event
    this.surface.bind("mouseleave", (args: any) => {
      // Hide the Popup
      this.show = false;
    });

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

export function drawScene(surface: 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);
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { PopupModule } from '@progress/kendo-angular-popup';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, PopupModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }


import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

In this article