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

CSS animation: Final position once the vertical text has finished scrolling

I have designed a CSS-animated headline with a leading word and three vertically-scrolling/fading statements to complete the sentence, inspired by the style used on careers.google.com. The animation runs through three cycles and stops, leaving the third st ...

htmlcsscss-animations

How can I use querySelector in JavaScript to target all div elements that have the same class?

I'm having an issue with the document.querySelector in my JavaScript code. It currently only selects the first div that contains the class "test", but I need it to select all such divs. Is there a way to achieve this using my existing JavaScript? ...

javascripthtmlcss

Is there a way to automatically change the display of an element once the user has closed the menu?

How can I ensure that the display of an element remains unchanged when a user opens and closes my website menu using JavaScript? ...

javascripthtmljquerycss

What is the syntax for adjusting background-position with ngStyle in Angular 4?

It's finally Friday! I'm a bit confused about how to properly set the background-position-x property in an [ngStyle] directive in Angular 4 with Ionic 3. Can someone guide me on the correct way to implement background-position-x? I expect the ou ...

angulartypescriptionic3

When the height is set to 100vh, the Div and Image appear misaligned vertically

Could someone explain why there is a vertical separation between the div and the image? <div style="height: 100vh; display: inline-block;width: 50%; background-color: blue">TEST </div><!-- --><img src="photos/openening.jpg" alt="SICK ...

htmlcssdisplayobject-fit

Update the dropdown field selection to the color #333 with the help of javascript

I am facing an issue with a dropdown field that has placeholder text and options to select. Initially, both the placeholder text and the options were in color #333. However, I managed to change the color of the placeholder text to light grey using the foll ...

javascripthtmlcss

How can a button click function be triggered in another component?

These are the three components in my dashboard.html <top-nav></top-nav> <sidebar-cmp></sidebar-cmp> <section class="main-container" [ngClass]="{sidebarPushRight: isActive}"> <router-outlet></router-outlet> & ...

angulartypescript

What could be causing the alignment issue with this html photo gallery?

Struggling to center a photo library on my webpage is really frustrating me. Does anyone have any tips? I've experimented with different ways to center it in the code, but nothing seems to do the trick :/ HTML: <div style="display: inline-block; ...

htmlcssweb

File handling in Angular 2 using Typescript involves understanding the fundamental syntax for managing files

Would someone be able to explain the fundamental syntax for reading and writing text files, also known as file handling in TypeScript? If there is a corresponding link that anyone could provide, it would be greatly appreciated. ...

javascriptangulartypescriptfile-handling

The placement of the sliding navigation menu is consistently positioned beneath the header

I created a jQuery menu that's also available on JSfiddle here: $(document).ready(function () { $(".navigation_button").on('click', function () { var $panel = $(this).next('.panel'); if ($panel.is(':visible ...

jqueryhtmlcss

Ways to access the value of the parent observable?

I've been exploring the concept of nesting HTTP requests using mergeMap. The API I'm working with sends data in parts, or pages, which means I have to make more requests based on the total number of pages. To determine the number of pages, I alw ...

angularrxjs

Sliding Image Menu using jQuery

I am struggling with creating a menu using jquery mouseenter / mouseout effects. My goal is to have a small icon displayed that expands to the left and reveals the menu link when a user hovers over it. The issue I am facing is that the effect only works w ...

javascriptjqueryhtmlcss

Implementing CSS keyframe animations in a customized Material UI component using React, Material UI, and JSS

I'm facing an issue with adding a CSS keyframe animation to my Material UI custom styled component. Whenever I try to add a keyframe animation, it throws an error in my code setup: const PulsatingCircle = styled("div")(({ theme, }) => ( ...

cssreactjsmaterial-uijss

Is there a way to make the footer adapt to the varying heights of the grid sections as they grow in size?

Currently, I am facing an issue with the positioning of the page footer. Despite my efforts, it does not remain at the bottom as intended. Please refer to the image for a visual representation of the problem. How can this be rectified? It is worth noting ...

htmlcsstwitter-bootstrap-3

Complete Form Validation Issue Unresolved by Jquery Validation Plugin

I'm facing an issue with the jQuery validation plugin while attempting to validate a form. Strangely, it only works for one input field. Can anyone suggest a solution? <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.valid ...

javascriptjqueryhtmlcssvalidation

Having trouble running the npm script due to a multitude of errors popping up

I have encountered an issue while trying to run an npm script. I added the script in the `package.json` file multiple times, but it keeps showing errors. I am currently working on building a website and require npm sass for it. However, when I try to run t ...

htmlcssnpmsasscommand-prompt

Connect the backend with the frontend using React.js

I am currently faced with the task of developing the front end for an existing backend project. The original front end was built using Angular, but I am opting to recreate it using React. However, I am unsure about how to establish a connection between t ...

reactjsangulartoken

What is the best way to incorporate a JavaScript function into an Angular 2 template?

I need a slider for my project and I am using AdminLTE <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-orientation="horizontal" data-slider-sele ...

javascriptangularbootstrap-slider

Can media queries styles be applied to a window of random size using JavaScript?

Can JavaScript be used to apply media queries style based on random window sizes? I have 5 buttons that I want to switch styles for using JavaScript according to the media queries defined in my CSS stylesheet. Is there a method to achieve this? ...

javascripthtmlcssmedia-queries

The issue with height percentages being ineffective in CSS

My goal is to utilize the height property with percentages, however it seems to be ineffective. I desire to use percentages so that the layout appears well in various resolutions. <div id="bloque_1" style="height: 80%;background: red"> </div> ...

htmlcssheight