How to create line breaks in Angular Material matTooltip elements?

I am currently utilizing Angular 7 along with Angular material matTooltip.

My goal is to have the tooltip display each element on a separate line, similar to this:

https://i.sstatic.net/faVoo.png

However, I am encountering an issue where it displays three elements per line instead of one element per line:

https://i.sstatic.net/2VfOB.png

In my code, I have:

items=['15-09-2020: 200','16-09-2020: 200','17-09-2020: 200', '18-09-2020: 200'];
newItems = this.items.join("\r\n");

This is how I implemented it in app.component.html:

<div class="col col-sm-2" matTooltipPosition="after" matTooltip="{{ items}}"></div>

You can see the example that is not working for me here:

Stackbliz

cssangulartypescriptangular-material

Answer №1

Reference :

If you're looking to add line breaks in tooltips, you can create a custom class in your global CSS and include it along with "matTooltipClass".

HTML

<button mat-raised-button
    matTooltip="Multiline Tooltip &#13; This is second line"
    matTooltipClass="multiline-tooltip">
    Multiline tooltip
</button>

Global CSS

.multiline-tooltip{
  white-space: pre-line;
}

In addition, for specific components, you need to include

encapsulation: ViewEncapsulation.None

in your component.ts

@Component({
  selector: 'app-tooltip',
  templateUrl: './tooltip.component.html',
  styleUrls: ['./tooltip.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class TooltipComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

I hope this information can be useful to others.

Answer №2

Asaf's response has been a game changer for me. Angular 14

matTooltip="Component: Test &#13;&#10;Last updated date: 2023-01-17T09:17:02.753Z"

Mattooltip

Answer №3

I managed to resolve this issue in my own project by utilizing &#13;&#10;

Therefore, the solution is as follows:

newItems = this.items.join("&#13;&#10;");

Furthermore, make sure to update the following line of code:

matTooltip="{{ items}}"

Change it to:

[matTooltip]="items"

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

Leveraging ZOD's discriminatedUnion() method to differentiate among three different forms

ValidationSchema = z.object({ AuthenticationBlock: z.object({ ChoiceOfForm: z.enum() DataBlock: z.discriminatedUnion(ChoiceOfForm, [ z.object({ ChoiceOfForm = 1, empty fields}) //corresponds to the basic form z.object({ ChoiceOfForm = 2, just ...

reactjstypescriptformszod

How come my script that is dependent on the viewport does not apply classes?

I created a code to add a class to a div, but it's not working as expected. I need help troubleshooting this issue. The code works fine on codePen, but not on my WordPress website. How can I make sure the browser executes this code properly? Link to ...

javascriptjquerycsswordpresselementor

Trouble obtaining AJAX result using onClick event

As a newbie to AJAX, I am still trying to grasp the concept. My task involves using an AJAX call to extract specified information from an XML file. Even after carefully parsing all tag elements into my JavaScript code, I encounter a problem when attempting ...

javascripthtmlcssajax

Use this jQuery-animated menu to make hyperlinks hover with style!

Currently immersed in my exam project, I have integrated an animated jQuery navigation. I am aiming to set the text color to white when hovering over both the link itself and the menu icon that appears upon hovering over the <li> elements. Despite ...

javascriptjqueryhtmlcssnavigation

Show a single div in a modal popup dialog box using Angular with a template URL HTML file

I am experiencing a problem with displaying specific div elements in my template. I have two divs, A and B, but when I try to call only one of them from the TypeScript file using dialog.open, both divs end up being displayed in the popup dialog box. My re ...

angulardialogmodal-dialog

Discovering elements with multiple classes using watir-webdriver

In this scenario, let's consider an element like the one below: <div class="first_class second_class"></div> Now, we can locate it by its classes using the following methods: browser.div(class: 'first_class') browser.div(class ...

htmlcssrubyseleniumwatir-webdriver

Issues with the jQuery UI Slide Animation

I am in the process of revamping our company website and incorporating a lot of effects using jQuery, Flash, and more. While I haven't encountered any major issues so far, there are two minor problems that keep popping up. Since I have received great ...

jquerycssjquery-uieffects

What is the best way to structure Vue.js components for optimal organization?

Imagine having an index page called index.vue consisting of various components like this: index.vue <template> <div> <component-1 /> <section class="section-1"> <div class="container section-container"> <com ...

javascriptcssvue.js

Display the title of an image beneath the image using CSS

Since upgrading my CMS, I've encountered an issue where the captions of images are not showing below the image for thousands of articles. For example: <img src="123.jpg" alt="Texttext" class="caption" style="disp ...

csstitlecaption

The karma test-runner is throwing an error code TS2503, indicating that the namespace 'gapi' cannot be located

karma test-runner error TS2503: Cannot find namespace 'gapi' ng test Trace 28 01 2021 14:50:25.878:INFO [karma-server]: Karma v5.2.3 server started at http://localhost:9876/ 28 01 2021 14:50:25.878:INFO [launcher]: Launching browsers Firefox wit ...

angularkarma-jasminekarma-runnergoogle-api-js-client

Connecting RxJS Observables with HTTP requests in Angular 2 using TypeScript

Currently on the journey of teaching myself Angular2 and TypeScript after enjoying 4 years of working with AngularJS 1.*. It's been challenging, but I know that breakthrough moment is just around the corner. In my practice app, I've created a ser ...

typescriptangularobservablerxjs

Issue with accessing form in Angular 6 Reactive forms for custom validator functionality

I am facing an issue with creating a password validation for reactive forms in Angular. Every time I try to verify the password, I get a “Cannot read property 'get' of undefined” error in the console. I have tried different methods to access ...

javascriptangulartypescriptvalidation

angular2 angular-entity directive

I have developed a component that accepts a template: export class TemplateParamComponent implements OnInit { @Input() items: Array<any>; @Input() template: TemplateRef<any>; } Here is the HTML code: <template #defaultTemplate le ...

javascriptangular

Leveraging jQuery for vertical alignment of an image

I am trying to vertically center an image with the class .personal within a container with the class .personal-row (located inside .row-main) on page load and when resizing. Initially, I attempted using vertical-align: middle;, but that did not yield the d ...

jquerycss

What is the best way to ensure consistent heights among my Bootstrap flex child elements?

It has come to my attention that the new version of Bootstrap (v4) utilizes flex to present elements within a box, providing more flexibility for alignment. On my webpage, I am dealing with three boxes that have equal heights. However, the inner white elem ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

What sets apart npm correlation-id from uuid?

Can you please explain the distinction between the uuid and correlation-id npm packages? It seems that correlation-id actually utilizes the uuid package internally.. When would you recommend using correlation-id over uuid? Important: I am not utilizing ...

javascriptnode.jsreactjsangularnpm

Difficulty encountered in positioning a div element

I have been attempting to align the div with class bioDiv under the image, but despite various attempts, I find myself feeling more and more confused. Can someone please review the code for me and offer a clue? I want to retain the same appearance, just re ...

htmlcssbootstrap-5

After installation, the local development environment for Angular 2 consistently runs just once

After following the local setup instructions for Angular 2 on Windows 10 as outlined at https://angular.io/docs/ts/latest/guide/setup.html, the initial run of the development environment works perfectly with "npm install" and "npm start". However, upon clo ...

node.jsangularnpm

The log out button is unresponsive and does not function properly

I am having trouble positioning the logout button on the left toolbar. I have tried using the position property, but it is not responsive. When I resize the Chrome window, the button disappears. I also attempted to use margin, but that did not work either. ...

css

Why does `react/require-default-props` still display an error even when a default prop value has been set?

This inquiry pertains to the guideline require-default-props. Here is the code snippet in question: function MyComponent({ blubb = 'my default', }: { blubb?: string, }) { // blubb defaults to 'my default' }; Eslint is flagging a ...

typescripteslinteslint-plugin-react