Angular 7 - Creating tooltips with multiline text

Question

Angular 7 - Creating tooltips with multiline text

I've utilized template strings to create a multi-line string.

toolTip = `
      ${Test}  : ${number}
      ${Test}  : ${number}
      ${Test}  : ${number}
      ${Test}  : ${number}
      ${Test}  : ${number}}`;

The issue I'm facing is that when displaying this multi-line string on a tooltip for a button, extra spaces are being added starting from the second line. This results in output like below:

Test string : 123
  Test string2 : 234
  Test string3 : 234

Is there a method to properly align them?

jquery angular string typescript string-interpolation

Answer 1

Answer №1

It appears that the issue is due to multiple random spaces within your string

Here's a suggestion:

toolTip =`${'string'}  : ${123}
${'string'}  : ${123}
${'string'}  : ${123}
${'string'}  : ${123}
${'string'}  : ${123}`;

https://stackblitz.com/edit/angular-ivy-9szvet?file=src/app/app.component.ts

Answer 2

It appears that the issue is due to multiple random spaces within your string

Here's a suggestion:

toolTip =`${'string'}  : ${123}
${'string'}  : ${123}
${'string'}  : ${123}
${'string'}  : ${123}
${'string'}  : ${123}`;

https://stackblitz.com/edit/angular-ivy-9szvet?file=src/app/app.component.ts

Angular 7 - Creating tooltips with multiline text

Answer №1

Similar questions

ngx-translate is being utilized to translate content in every child component within the module

The 'Required' attribute in HTML is malfunctioning

Failure of jQuery Code Upon Successful Execution

The Facebook provider is missing in Ionic Native

What is the process for creating a unit test case for an Angular service page?

Element that moves in conjunction with scroll (without using position:fixed)

Retrieving XML element values from an array of elements using jQuery

Encountering an issue in Angular 8 with ng2-chart where the error message reads: "RangeError: Maximum call stack size

Sending post back data to PHP variable using jQuery AJAX

Tips for validating a form with the assistance of jQuery

What is the best way to adjust the height of an IFrame to match the size of its content?

Click on a specific button within a DataTable row

Utilize the canActivate method to decide when to display a specific hyperlink

Learning how to serve static files in a virtual directory with Angular Universal and Asp Net Core

Issues with jQuery Relative URLs Not Functioning as Expected

What is the best way to utilize namespaces across multiple files in your program

Utilize either the success() or complete() method when making an AJAX call

real-time mat-progress-bar constantly updating

Swapping out video files with varying quality using HTML5 and Jquery

Bootstrap Carousel unexpectedly leaps to the top of the page while moving forward