Incorporating an external SVG file into an Angular project and enhancing a particular SVG element within the SVG with an Angular Material Tooltip, all from a TypeScript file

Question

Incorporating an external SVG file into an Angular project and enhancing a particular SVG element within the SVG with an Angular Material Tooltip, all from a TypeScript file

Parts of the angular code that are specific

|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');
      }

    }
  }

It is possible to access and modify attributes in order to incorporate an Angular Material Tooltip. The tooltip property can be utilized within the HTML file itself, with the requirement that the entire SVG code is contained within the HTML rather than being referenced as an external file. Assistance is needed on how to achieve this.
As

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

does not make sense since Tooltip is not a property of the SVG. Therefore, the query remains on how to add a tooltip specifically to the circle element in the externally linked SVG file from the Typescript file. The objective is to implement a tooltip solely for the circle in the SVG!

angular typescript svg tooltip external

Answer 1

Answer №1

When creating a tooltip, there are two approaches we can take: using popperjs (such as ng-bootstrap or bootstrap) or utilizing the built-in cdkoverlay (like material angular).

To implement ckdoverlay, we need to inject Overlay in the constructor, create a Portal, and then attach it on mouseenter and detach it on mouseleave. If we prefer using HTMLElements, we can create a class to encapsulate all the functionality.

 // code example goes here

An important aspect when using DomPortal is that it remains in the .html when not attached—we can also opt for a TemplatePortal, but that requires injecting a ViewContainerRef as well. To show/hide the tooltip, we can toggle its visibility with typical CSS:

.tooltip {
  ...
  display:none;
}

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

Another crucial detail is indicating the position conveniently as top, bottom, left, or right. This can be achieved by defining an object like this:

// Code snippet goes here

With this class, we have two options: either use it as a directive or integrate it into a component that injects OverLay.

// Code snippet goes here

In an HTML example, you can include the directive as follows:

// Code snippet goes here

In case you prefer using the library in a TypeScript component, ensure to properly initialize and later destroy the TooltipOverLay instance:

// Code snippet goes here

You can find an example showcasing both methods in the following stackblitz. Alternatively, you can explore another demonstration by forking GRM's code and adapting it to attach a tooltip to an inner element of an SVG in this modified stackblitz.

Answer 2

When creating a tooltip, there are two approaches we can take: using popperjs (such as ng-bootstrap or bootstrap) or utilizing the built-in cdkoverlay (like material angular).

To implement ckdoverlay, we need to inject Overlay in the constructor, create a Portal, and then attach it on mouseenter and detach it on mouseleave. If we prefer using HTMLElements, we can create a class to encapsulate all the functionality.

 // code example goes here

An important aspect when using DomPortal is that it remains in the .html when not attached—we can also opt for a TemplatePortal, but that requires injecting a ViewContainerRef as well. To show/hide the tooltip, we can toggle its visibility with typical CSS:

.tooltip {
  ...
  display:none;
}

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

Another crucial detail is indicating the position conveniently as top, bottom, left, or right. This can be achieved by defining an object like this:

// Code snippet goes here

With this class, we have two options: either use it as a directive or integrate it into a component that injects OverLay.

// Code snippet goes here

In an HTML example, you can include the directive as follows:

// Code snippet goes here

In case you prefer using the library in a TypeScript component, ensure to properly initialize and later destroy the TooltipOverLay instance:

// Code snippet goes here

You can find an example showcasing both methods in the following stackblitz. Alternatively, you can explore another demonstration by forking GRM's code and adapting it to attach a tooltip to an inner element of an SVG in this modified stackblitz.

Incorporating an external SVG file into an Angular project and enhancing a particular SVG element within the SVG with an Angular Material Tooltip, all from a TypeScript file

Answer №1

Similar questions

Travis CI's TypeScript build process detects errors before Mocha has a chance to catch them

"Utilizing SVG format to manipulate text, adjusting font size within tspan elements

"Encountering a 'Module Not Found' error in Node.js after

The declaration file for the 'express' module could not be located

Icons from Material UI individually designed

What causes the left click to not trigger in Kendo's Angular Charts?

Encountered Typescript errors TS1110 and TS1005

There was an unhandled exception that occurred due to a missing file or directory with the lstat error on 'D:a1s ode_modulesquill'

Mysterious Chrome glitch causes SVG element to shift down by 2 pixels

The Append method in FormData is not functioning properly within Angular

Encountering a "Multiple registrations of the method 'get' on the path '../api/' error" with Swagger

Instructions for disabling editing for a specific cell within an inline editable row in primeNG

Why is the selected option not visible in the Angular 8 drop-down?

To trigger a Bootstrap 5 modal in a child component from a button click in the parent component in Angular without the need to install ng-bootstrap is possible with the following approach

Using inline style instead of relying on the quill editor's built-in classes, as classes may not be accessible in order to render HTML effectively

Tips for making use of incomplete types

How can you inject the parent component into a directive in Angular 2, but only if it actually exists?

Utilizing Node.js and Jasmine: Preventing the invocation of a Promise function to avoid executing the actual code results in DEFAULT_TIMEOUT_INTERVAL

Display streaming data continuously within an HTML page using Angular 16

What advantages does NgRx offer that Signal does not provide?