Angular mat-table experiencing issues with matToolTip functionality

My Angular project is using Angular Material 16x, but for some reason, the matToolTip is not displaying at all. I have experimented with various versions, including a basic matTooltip="hello world", but I just can't seem to get it to work. I have come across conflicting information regarding whether a matTooltip can be placed inside an ng-container, with some examples showing that it is possible. Can anyone pinpoint what might be going wrong?

--my component
<mat-card class="mat-form-field">
    <mat-card-content>
        <table
          style="width: 100%"
          mat-table
          matSort
          matSortActive="created"
          matSortDisableClear
          matSortDirection="asc"
          [dataSource]="dataSource"
          multiTemplateDataRows="true"
        >

<ng-container matColumnDef="statusDot">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let row">
        <img
            src="../../../assets/images/Basic_green_dot.png"
            alt=""
            matTooltip="tooltipTpl"
            style="width: 15px; height: 15px"
        />
    </td>
</ng-container>

<ng-template #tooltipTpl>
    <div style="background: gray">
    <div>This is a template!</div>
    </div>
</ng-template>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

<mat-paginator [pageSizeOptions]="[10, 25, 100, 1000]"></mat-paginator>
</mat-card-content>
</mat-card>
angulartypescriptangular-material

Answer №1

According to the official documentation, mat-tooltip only supports input of type string, meaning it does not have the capability to process templates. Therefore, tooltip messages can only be provided as strings.

@Input('matTooltip') message: string

Specifies the message to be displayed in the tooltip

Simply pass a string as the message!

css

.custom-tooltip-class .mdc-tooltip__surface {
  background: red !important;
}

html

...
<img
                src="https://placehold.co/600x400"
                alt=""
                matTooltip="This is a template!"
                matTooltipClass="custom-tooltip-class"
                style="width: 15px; height: 15px"
            />
...

stackblitz

Answer №2

By including the MatTooltipModule in your component, you can effectively resolve the problem.

Answer №3

From my experience with MatTooltip, it seems that only a string can be passed, not an elementRef. Please correct me if I am mistaken!

It appears that you are seeing "tooltipTpl" as the tooltip when hovering. To achieve the same styling as in the <ng-template>, you can add a class to the matTooltip as described in the documentation:

<button mat-raised-button
        matTooltip="Info about the action"
        matTooltipClass="example-tooltip-uppercase"
        aria-label="Button that shows a red tooltip"
        class="example-button">
  Uppercase-tooltip Action
</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating Moralis into Ionic Angular with TypeScript

I'm currently developing an app using Ionic Angular (TypeScript) that will be compatible with both Android and iOS devices. I've decided to incorporate the Moralis SDK to establish a connection with the Metamask wallet. Here's a summary of ...

angulartypescriptmetamaskmoralis

The keys within a TypeScript partial object are defined with strict typing

Currently, I am utilizing Mui components along with TypeScript for creating a helper function that can generate extended variants. import { ButtonProps, ButtonPropsSizeOverrides } from "@mui/material"; declare module "@mui/material/Button&q ...

javascriptreactjstypescriptmaterial-ui

Firebase Cloud Function Local Emulator Fails to Retrieve Data with Error 404

My goal is to locally trigger a Firebase Cloud Function using the emulator. However, every time I try, the function returns a 404 Not Found status code and a response body of Cannot Get. The function is deployed locally and visible on the UI, but it fails ...

typescriptfirebasegoogle-cloud-platformgoogle-cloud-functions

Issue with Angular drag and drop functionality arises when attempting to drop elements within an n-ary tree structure displayed using a recursive template

I am currently exploring the functionality of angular material drag and drop. Within my application, I have implemented an n-ary tree structure. Since the specific form of the tree is unknown beforehand, I have resorted to using a recursive template in or ...

javascriptangulardrag-and-dropangular-materialangular-cdk

Angular v15 Footer Component Table

In my Angular 15 project, I am attempting to correctly position and utilize the mat table with the following code snippet: <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>. While the displayedColumns property is functionin ...

angulartypescriptfrontenddocumentation

Can we condense the code to create a more concise and efficient function?

Can someone help me refactor this code snippet below into a function and combine the two IF statements? Many thanks! let value = productDetails.recentPurchaseDate; if (!productDetails.salesPrice && !productDetails.recentPurchaseDate) { value = false; } ...

javascripttypescript

Issue: Unable to link with 'dataSource' as it is not a recognized feature of 'mat-tree'

Upon following the example provided at https://material.angular.io/components/tree/overview, I encountered an error when trying to implement it as described. The specific error message is: Can't bind to 'dataSource' since it isn't a kn ...

angulartypescriptangular-materialangular-material2angular6

Displaying code within an Angular 2 template

Working on an Angular 2 project and facing a challenge in displaying C# code within the template, which may later be styled with syntax highlighter. The issue arises when attempting to insert the C# code into the Angular 2 template, resulting in template ...

angular

The Same Origin Policy has prevented access to the remote resource located at http://localhost:8082/api/countries due to a Cross-Origin Request Block

Solution The XMLHttpRequest access to 'http://localhost:8082/api/countries' from the origin 'http://localhost:4200' has been blocked by the CORS policy. The response to the preflight request is failing the access control check because t ...

javaangulartypescriptspring-bootcors

Exploring the Power of Observables in Angular 2: Focusing on Targeting an Array Nested Within

I encountered a situation where I was successfully looping through objects in an array within my Angular 2 application using observables. In the client service file, my code looked like this: getByCategory(category: string) { const q = encodeURICompon ...

javascriptarraysangulartypescript

Specific TypeScript function that exclusively accepts types such as `number|undefined` and does not simply accept `number` alone

I've been working on creating a utility class that can help me throw an exception when something may be undefined, like throwIfUndefined(array[index]).function() and throwIfUndefined(obj.key).function(). My goal is to streamline my code as using if co ...

typescript

The parameter type cannot be assigned to an array type of 'IAulasAdicionais[]'

I am facing a problem in my application that I need help solving. The issue lies within my code, and I have included some prints of the error below: Mock data: "AulasAdicionais": [ { "Periodo": "1", "Hora ...

reactjstypescriptmaterial-ui

Exploring ways to conduct a thorough scan of object values, inclusive of nested arrays

My goal is to extract all values from an object. This object also includes arrays, and those arrays contain objects that in turn can have arrays. function iterate(obj) { Object.keys(obj).forEach(key => { console.log(`key: ${key}, value: ${o ...

typescriptiteration

Generating TypeScript declarations for legacy CommonJS dependencies with the correct "module" setting

One of my challenges involves creating type declarations for outdated dependencies that produce CJS modules and lack typings. An example is the aabb-3d module (although this issue isn't specific to that particular module). To generate the declaration ...

typescripttsctype-declaration

Adjust the size of every card in a row when one card is resized

At the top of the page, I have four cards that are visible. Each card's height adjusts based on its content and will resize when the window size is changed. My goal is to ensure that all cards in the same row have equal heights. To see a demo, visit: ...

javascriptjquerycssangular

Merging an assortment of items based on specific criteria

I have the following TypeScript code snippet: interface Stop { code: string } interface FareZone { name: string; stops: Stop[]; } const outbound: FareZone[] = [{name: 'Zone A', stops: [{ code: 'C00'}] }, {name: 'Zone B ...

javascripttypescript

Unveiling the seamless integration of TypeScript with webpack/metro mainFiles module resolution

Scenario Setup In Webpack, the mainFiles module resolution feature allows for resolving specific files based on the environment. This concept is exemplified by: | Button | | - index.ts | | - index.performer.ts | | - index.customer.ts // page.ts im ...

typescriptreact-nativewebpack

The invocation of `prisma.profile.findUnique()` is invalid due to inconsistent column data. An invalid character 'u' was found at index 0, resulting in a malformed ObjectID

The project I'm working on is built using Next.js with Prisma and MongoDB integration. Below is the content of my Prisma schema file: generator client { provider = "prisma-client-js" } datasource db { provider = "mongodb" url = env("DATABA ...

javascripttypescriptmongodbnext.jsprisma

Encountering the error message "Subscribe is not a function in Jasmine" while

Encountering an issue where I am receiving an error stating "subscribe is not a function" in Angular unit testing. Here is the call that I have implemented in my component: this.myService.employees.subscribe(emp => this.emp = emp); Despite creating a ...

angularunit-testingjasminekarma-jasmine

Encountering an issue with ng serve following the update of Angular, Material, and Bootstrap

Here is the package.json configuration: angular: 5.2.8 angular material : 5.1.1 angular/cli: "~1.7.3" bootstrap: "~4.0.0" Encountering an error while running ng serve: ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader?? embedded!./nod ...

angularthemesbootstrap-4angular-materialangular-cli