Заголовок всплывающей подсказки

Question

Я использовал padEnd для одинакового пространства для строки и привязки в заголовке. Когда я утешу строку. Строка идеально выровнена с интервалом, но заголовок в заголовке выглядит иначе. Поддерживает ли заголовок интервал?

Код

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>

Консоль

Мой взгляд

Answer 1

Всплывающая подсказка создается на основе атрибута title, но она отображается вашей ОС и использует семейство шрифтов, отличное от вашей веб-страницы. Кажется, что это не моноширинный шрифт, что означает, что ширина букв не одинакова. Однако в консоли браузера в основном используется моноширинный шрифт, поэтому он выглядит выровненным там, но не во всплывающей подсказке. К сожалению, вы не можете стилизовать всплывающую подсказку, но вы можете использовать библиотеку всплывающих подсказок, которая позволяет вам делать это, визуализируя текст внутри вашей DOM.

Answer 2

пробовать с ограниченным характером

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

Answer 3

Шрифт, используемый в консоли, является моноширинным шрифтом, что означает, что каждый символ имеет одинаковую ширину, по умолчанию веб-браузер не использует моноширинный шрифт.

Для принудительного использования моноширинного шрифта Вы можете использовать это CSS правило:

font-family: monospace;

Вам нужно будет создать собственную подсказку.

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