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

a helpful utility type for extracting a union from a constant array of strings

What methods does Angular use to display custom HTML tags in IE9/10 without causing any issues for the browser?

Tips for showcasing styled text in Vue using API data

Exploring the power of Vue CLI service in conjunction with TypeScript

Showcasing a single JSON object in an Angular application

Bar chart in Chart.js becomes crowded and illegible on smaller screens due to overlapping bars

Issue with Nuxt: Property accessed during rendering without being defined on the instance

Determine parameter types and return values by analyzing the generic interface

Problems encountered while building TypeScript on Azure's Hosted Agent

What is the meaning of '=>' in typescript/javascript?

Compilation with Webpack and Postcss failed due to the inability to locate the scss file within the library in node_modules

Ionic 2 - Dynamically Loading Segments

Tips for deleting multiple objects from an array in angular version 13

Datatable - pagination - retrieving data from a specific page

Best Practices for Architecture and Routing in Angular 8 (suggestions)

What is the connection between @types, TypeScript, and Webpack?

What is the reason behind the command "npm-install" placing files directly into the root directory?

Prevent a React component from unnecessarily re-rendering after a property has been set

The module ~/assets/images/flags/undefined.png could not be found in the directory

storing information in localStorage using react-big-calendar