CODEWITHSUNDEEP
javascripthtmlangulartypescript
Felix Christo
Felix Christo

Reputation: 287

Title Tooltip Spacing Issue

I have used padEnd for equal space for the string and binding in the title. When I console the string. The string is perfectly aligned with spaced but the binded title looks different. Do the title supports the spacing?

Code

arr = [{ name: "Rasagula", carbs: 16.6 },{ name: "Masala Vada", carbs: 16.2 },{ name: "Veg Bonda", carbs: 8.1 }];
  ngOnInit() {
    this.manipulateArr();
  }
  manipulateArr() {
    var carbs = this.arr.map(k => k.carbs);
    var items = this.arr.map(k => k.name);
    this.printThis = items.map((x, i) => {
    this.spacePad(x) + " : " + carbs[i] + "(g)";
    }).join('/n');
  }
  spacePad(value) {
    return value.padEnd(25);
  }

HTML

<td title={{printThis}}>Some Values</td>

Console

enter image description here

My View

enter image description here

Upvotes: 0

Views: 271

Answers (3)

Totati
Totati

Reputation: 1582

The tooltip is generated based on the title attribute, but it's rendered by your OS, and it uses a different font-family than your web page. It seems that it's not a monospaced font, which means the widths of the letters are not equal. However a browser's console mostly use monospaced font, that's why it appears aligned there, but not in the tooltip. Sadly you can't style the tooltip, but you can use a tooltip library that let's you doing this by rendering the text inside your DOM.

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

try with limited character

spacePad(value) {
    return value.substr(0, 19).padEnd(25);
  }

Upvotes: 0

Ploppy
Ploppy

Reputation: 15353

The font used in the console is a monospace font, which means that each character have the exact same width, by default the web browser does not use a monospace font.

In order to force a monospace font you can use this CSS rule :

font-family: monospace;

You will have to create your own tooltip.

#trigger-tooltip {
 position: relative;
}
#trigger-tooltip:hover #tooltip {
 font-family: monospace;
 position: absolute;
 top: 0px;
 left: 0px;
}

Upvotes: 0

Related Questions