The multiline feature of tooltip on mat-table cell is malfunctioning

I adjusted the mat-tooltip to be displayed as multiline using the following style in the global CSS:

 .mat-tooltip-class-here {
  white-space: pre-line !important;
 }

Interestingly, this formatting works on span and button elements but not on mat cells.

View on span (Functional):

https://i.stack.imgur.com/474Gn.png

View on button (Functional):

https://i.stack.imgur.com/iqDyV.png

View on table cell (Not functional):

https://i.stack.imgur.com/yisE4.png

I am uncertain about the root cause of this issue. A sample stackblitz can be found here: https://stackblitz.com/edit/angular-4mtwsw

cssangulartooltipmat-table

Answer №1

There seems to be a discrepancy regarding line breaks.

While 
 functions as a new line for buttons and spans, table cells may require the use of \r\n or \n.

I'm not sure why this is the case, but it's currently working as expected. It's important to note that any popover styling should be applied globally in the CSS, as it renders directly within the body.

Answer №2

Encountering an issue with the mat table when using mat-tooltip, but there is a workaround available. Instead of adding the tooltip directly on td, you can insert a div or span element and apply the tooltip to that.

<td mat-cell *matCellDef="let row">
      <span [matTooltip]="row.title" matTooltipPosition="below"> {{ (row.title && row.title?.length > 20) ? ((row.title).slice(0, 20) + '...') : row.title }}</span>
</td>

Please note that this workaround may not completely resolve the issue, but it should help improve the placement of the tooltip to some extent.

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

Angular 2 System.config map leading to a 404 error message

I am encountering a 404 error in the browser console while attempting to map the Auth0 module from node_modules in my Angular 2 project using the system.config in the index file. Index File <!-- 2. Configure SystemJS --> <script> System.con ...

javascriptangularauth0

Proper alignment of content in HTML using Bootstrap following the integration of .json data

After aligning the emergency hotlines properly, I am struggling to position the text under the image to display the data in three rows. I attempted col-4 but encountered issues with JSON. My objective is to show the image followed by the numbers directly b ...

htmlcssjsontwitter-bootstrap

The function 'makeDecorator' does not support function calls when being accessed

Resolved by @alexzuza. Check out his solution below - major props! The issue was with the node_modules folder in the ng2-opd-popup directory, it needed to be removed and the src/tsconfig.app.json file had to be adjusted accordingly. Make sure to also refer ...

jsonangulartypescriptnpmsimplemodal

The Vue.js modal is unable to resize below the width of its containing element

My challenge is to implement the Vue.js modal example in a larger size. I adjusted the "modal-container" class to be 500px wide, with 30px padding and a max-width of 80%. However, I'm facing an issue where the "modal-mask" class, containing the contai ...

javascriptcssvue.js

Set the position of a div element to be fixed

I am currently working on a straightforward application that requires implementing a parallax effect. Here are the methods I have experimented with so far: - Inserting an image within a div with the class parallax. - Subsequently, adding an overlay div ...

javascripthtmlcsssassparallax

How to create a dynamic background color animation in jQuery similar to a progress bar animation

I have a container with text content (for example: My Name) and it is displayed in a RED background color along with a button. What I am looking for : When the button is clicked, I want to change the background color of the container from RED to BLUE, si ...

jquerycssjquery-uiprogress-barjquery-effects

Encountered an issue finding element with Protractor - Error: script timed out after 20 seconds without receiving a response

I recently created a basic website using Angular 6 and I am facing some challenges while writing e2e tests for it. The first script is causing a lot of trouble for me as it throws the following error: C:\Users\user\Documents\workspace- ...

angularselenium-webdriverprotractor

Create a table that allows one column to have ample space, while ensuring that the other columns have uniform widths

This HTML/CSS creation features the following: https://i.stack.imgur.com/R8PRB.png However, the challenge lies in making the Very Good, Good, Fair, Poor, Very Poor columns equal in width while still allowing the "question" column to adjust its width acco ...

htmlcsshtml-table

How can we refine the user information based on the selection of a radio button?

How do I apply a filter to user details when selecting a radio button? Visit Plunker *I need to display only the questions of authenticated users on the list page, so I created a plunker example. If the user is authenticated or an admin, I want to filter ...

htmlcssangularjsmeanjs

Placing a picture within a box that is 100% of the viewport height

After searching for a while, I still haven't found a solution to my problem. I am currently working on a Personal portfolio that has different sections with a height of 100vh each. However, I am facing difficulty in positioning the images within the s ...

htmlcss

Angular Material's dialog modal swiftly closes without delay

Could you please explain why the modal opens and then closes instantly when I click on the Create Project button? https://example.com/edit/angular-code I am trying to display a component within the modal using Angular Material. portafolio.component.ts ...

angulartypescriptangular-material

Setting up Angular on Mac OS 10.13

I'm in the process of attempting to follow the quickstart guide for running Angular locally on MacOS 10.13.6. However, upon entering the initial command, I encountered a series of errors: npm install -g @angular/cli Here is the output: npm ERR! pat ...

node.jsangularmacosnpm

The page switch with a jittery effect

Could really use some assistance with this code that has been giving me trouble for quite a while now. It's a simple HTML, CSS, and JS code involving two pages. [The second page overlaps the first by default, but adjusting the z-index of the first p ...

javascripthtmlcss

Ways to relocate the menu within the confines of the "menu border"

Is it possible to move the menu inside the border on this webpage? I am new to web design and was thinking of using position:absolute for the links. Should I also move the submenu along with it? Any suggestions on how to achieve this? Thank you! The goal ...

htmlcssmenuposition

What are some effective ways to implement a real-time tracking system for shipments using Angular JS?

I am currently working on developing a shipment tracker using Angular, HTML5, and CSS3. Does anyone have any suggestions on how to dynamically create the shipment tracker using AngularJS? My initial plan is to incorporate ng-animate for the tracker. Than ...

angularjshtmlcss

Customizable dropdown menu design using HTML and CSS

Hello everyone, this is my very first post on Stack Overflow and I'm a bit unsure about the rules regarding posting. Please feel free to point out any mistakes I may have made. I've searched through the forums but haven't found a clear answe ...

htmlcssdropdown

Is there a way to make the Sweetalert2 alert appear just one time?

Here's my question - can sweetalert2 be set to only appear once per page? So that it remembers if it has already shown the alert. Swal.fire({ title: 'Do you want to save the changes?', showDenyButton: true, showCancelButton: true, ...

htmlangulartypescriptmodal-dialogsweetalert2

Tips for setting up Highcharts tooltip.headerFormat using the function getDate() plus 5

I'm facing a little challenge trying to understand how the JavaScript function getDate interacts with Highcharts datetime on xAxis. My goal is to show two dates in the tooltip header, forming a date range like this: 1960/1/1 - 1965/1/1. The first da ...

javascriptdatehighchartstooltipgetdate

What is causing all webkit browsers to overlook the z-index in my code?

I have removed all unnecessary elements from my webpage to focus on reproducing a specific issue. HTML: <html lang="en-us"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initi ...

htmlcss

Exploring deep nested components and elements in Angular for a targeted specific functionality

Is it possible to apply the ng deep css class to only one specific checkbox in my component, rather than all checkboxes? I want to customize just one checkbox and leave the others unchanged. How can this be achieved? Thank you. I need the CSS modificatio ...

cssangulartypescript