具有大文本大小的 Angular ui-grid 工具提示答案

【问题标题】：Angular ui-grid tooltip with large text size具有大文本大小的 Angular ui-grid 工具提示
【发布时间】：2016-09-03 04:11:33
【问题描述】：

我正在使用 angularjs UI-Grid 来显示数据，但工具提示会破坏 UI。
场景：当任何列出现大文本时，列工具提示无法正确显示文本，甚至显示扭曲的 ui。
我创建了一个 plunker，并检查第二列工具提示文本。

网址：http://plnkr.co/edit/ZRiSriYJaaU0NLzr5RLR?p=preview
请建议如何在 Angular UI-Grid 的工具提示中显示大文本

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

    <div ng-controller="MainCtrl">
      <br>
      <br>
      <div id="grid1" ui-grid="gridOptions" class="grid"></div>
    </div>

    <script src="app.js"></script>
  </body>
</html>

【问题讨论】：

问题似乎仅限于 Firefox...在 Google Crome (52.0.2743.116 m) 上，对我来说它看起来不错（工具提示文本在 3 行上被破坏，并且工具提示窗口在浏览器窗口...

标签： angularjs angular-ui-grid

【解决方案1】：

您可以在 cellTooltip 文本中使用 \n 来分隔长行。

喜欢

'Name: ' + row.entity.name + '\nCompany: ' + row.entity.company +'\n';

【讨论】：