Accessing an external SVG File and adding an angular material Tooltip to a specific SVG element inside the whole SVG from a typescript file: Angular

Question

Specific parts of the angular code

|SVG File|

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
     width="950" height="450" viewBox="0 0 1280.000000 1119.000000"
     preserveAspectRatio="xMidYMid meet">
<circle r="50px" cx="650" cy="968" fill="red" stroke="black" visibility="visible"/>
  <rect x="650.117" y="968.413" width="1000" height="800" fill="green" visibility="visible"/>
</svg>

|HTML File|

<object #svgmyimage>
</object>

|Type Script File|

 @ViewChild('svgmyimage') imageSvg?:ElementRef;

 ngOnInit() {
    this.reset();
    this.httpClient
          .get(`assets/svgimages/image1.svg`, { responseType: 'text' })
          .subscribe((value: string) => {
            this.svgStr = value;
//             console.log(this.svgStr);
            this.drawImage();
          });

  }

  drawImage() {
    if (this.imageSvg && this.svgStr) {

      this.imageSvg.nativeElement.innerHTML = this.svgStr;

      if(this.imageSvg.nativeElement.children[0])
      {
          this.imageSvg.nativeElement.children[0]setAttribute('visibility', 'visible');
          this.imageSvg.nativeElement.children[1]setAttribute('fill', 'yellow');
      }

    }
  }

Like this. I am able to access and change the attributes to add a Angular Material Tooltip. I could use tooltip property in the HTML file itself and it works provided the whole svg code is inside my HTML rather than linked as an external file. Could someone help me on this.
As

this.imageSvg.nativeElement.children[0]setAttribute('matTooltip', 'information');

makes no sense as Tooltip is not a property of the SVG. So, how to add tooltip to an externally linked svg file in html from the typescript fil. I wanna add tooltip only to the circle in the svg!

Answer 1

To create a "tooltip" we can take two approach: use popperjs (like use ng-bootstrap or the own bootstrap) or use the own cdkoverlay (like use material angular).

To use ckdoverlay we need inject in constructor Overlay, create a Portal and attach when mouseenter happends and deattach when mouseleave. If we want to use HTMLElements we can create a class to encapsulate all the logic.

export class TooltipOverLay {
  overlayRef: OverlayRef;
  domPortal:DomPortal
  showSubscription: Subscription = null;
  hideSubscription: Subscription = null;

  //in constructor we received the OverLay, and two htmlElements:
  //one (element) where is attached the another one (tooltip)

  constructor(overlay:Overlay,element: HTMLElement,
              tooltip:HTMLElement, options: string[]) {

    //we create a portal
    this.domPortal=tooltip instanceof HTMLElement?new DomPortal(tooltip):null;

     //we create a reference 
   this.overlayRef=this.createOverLay(overlay,element,
                    options?options.map(x=>POS[x]):null)

    //subscribe to "mouseenter" and "focus"
    this.showSubscription = merge(
      fromEvent(element, 'mouseenter'),
      fromEvent(tooltip, 'focus')
    ).subscribe(() => {

      //we attach the "portal"
      if (!this.overlayRef.hasAttached()) 
            this.overlayRef.attach(this.domPortal)
            setTimeout(()=>{
              this.domPortal.element.setAttribute('data-show','')

            })
    });

    //subscribe to "mouseleave" and "blur"
    this.hideSubscription = merge(
      fromEvent(element, 'mouseleave'),
      fromEvent(tooltip, 'blur')
    ).subscribe(() => {

      //we "deattach" the element
      if (this.overlayRef.hasAttached()) 
      {
        this.domPortal.element.removeAttribute('data-show')
        this.overlayRef.detach();
      }
    });
  }

  //we create the overLayRef in a private function
  private createOverLay(overlay:Overlay,element:HTMLElement,positions:any=null)
  {
    positions=positions?[...positions,POS.top,POS.bottom]:[POS.top,POS.bottom]
    const scrollStrategy = overlay.scrollStrategies.reposition();
    const positionStrategy = overlay
      .position()
      .flexibleConnectedTo(element)
      
      .withPositions(positions)
      .withPush(false);
    return  overlay.create({
      positionStrategy,
      scrollStrategy,
      hasBackdrop: false,
    });
  }

  //a function "destroy" help us to unsubscribe
  destroy() {
    this.showSubscription && this.showSubscription.unsubscribe();
    this.hideSubscription && this.hideSubscription.unsubscribe();
    if (this.overlayRef.hasAttached()) {
      this.overlayRef.detach();
    }
    this.overlayRef.dispose();
  }
}

A important note when we use a DomPortal is that, when is not attached it is in the.html -we can also create a TemplatePortal, but for this it's necesary inject also a ViewContainerRef-. To "hide" when is not attach we can use a typical.css:

.tooltip {
  ...
  display:none;
}

.tooltip[data-show] {
  display:block
}

So, if we add an attribute "data-show" the element is showed, and if we remove the element is not showed

The another important note is use a "confortable way" to indicate if the position is bottom, down, left or rigth. To do it we define as const an object like

export const POS = {
  top: {
    originX: 'center',
    originY: 'top',
    overlayX: 'center',
    overlayY: 'bottom',
    offsetY: -5,
  },
  right: {
    originX: 'end',
    originY: 'center',
    overlayX: 'start',
    overlayY: 'center',
    offsetX: 5,
  },
  bottom: {
    originX: 'center',
    originY: 'bottom',
    overlayX: 'center',
    overlayY: 'top',
    offsetY: 5,
  },
  left: {
    originX: 'start',
    originY: 'center',
    overlayX: 'end',
    overlayY: 'center',
    offsetX: -5,
  },
};

Well, with this class we can do two things: A directive

@Directive({
  selector: '[appTooltipOverlay]',
})
export class TooltipOverlayDirective implements OnDestroy {
  tooltip: TooltipOverLay = null;
  options: any = null;
  @Input() set appTooltipOverlay(value: HTMLElement) {
    this.tooltip = new TooltipOverLay(
      this.overlay,
      this.elementRef.nativeElement,
      value,
      this.options
    );
  }

  @Input('positions') set _options(value: string[]) {
    const positions = value
      .map((x) => (POS[x] ? POS[x] : null))
      .filter((x) => x);
    const positionStrategy: PositionStrategy = this.overlay
      .position()
      .flexibleConnectedTo(this.elementRef.nativeElement)
      .withPositions(positions)
      .withPush(false);
    this.tooltip.overlayRef.updatePositionStrategy(positionStrategy);
  }

  constructor(private overlay: Overlay, private elementRef: ElementRef) {}
  ngOnDestroy() {
    this.tooltip.destroy();
  }
}

That we can use like

<button
  [appTooltipOverlay]="tooltip"
  [positions]="['top', 'bottom']"
  aria-describedby="tooltip"
>
  My button
</button>

<div #tooltip class="tooltip">My tooltip overlay</div>

Or we can use the library in.ts in a component that inject the OverLay

tooltipOverLay:TooltipoverLay=null
@ViewChild('tooltip',{static:true}) tooltip?:ElementRef;
@ViewChild('button',{static:true}) button?:ElementRef;
constructor(private overlay:Overlay){}

ngOnInit()
{
    this.tooltipOverLay=new TooltipOverLay(
          this.overlay,this.button.nativeElement,this.tooltip.nativeElement)
}

//Don't forget destroy!!!!
ngOnDestroy()
{
      this.tooltipOverLay && this.tooltipOverLay.destroy()
}

A eg of.html

   <button #bt aria-describedby="tooltip">My button</button>
   <div #tooltip class="tooltip" role="tooltip">
       My tooltip overlay in .ts
   </div>

In this stackblitz there're a example of both and the same tecnica using popperjs to create the tooltip

In this another stackblitz I forked the code of GRM to use the library to attach a tooltip to a inner element of the.svg (NOTE: really I don't understand too much the advantage of use httpClient to add the.svg (we can use a <img src="your.svg"> )