All Components

Displaying Tooltips for Shapes

You can implement a tooltip 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.

The following example demonstrates how to display a tooltip of a shape on hover.

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 } from '@progress/kendo-drawing';
import { Rect, Point, Size, transform } from '@progress/kendo-drawing/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 { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { PopupModule } from '@progress/kendo-angular-popup';
import { AppComponent } from './app.component';

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

export class AppModule { }

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

In this article