Angular ui-grid tooltip with large text size

Question

I am using angularjs UI-Grid to show data but tool-tip breaking the UI.
Scenario: when any column gets large text then column tool-tip does not show text correctly even shows distorted ui.
I have created a plunker, and check second column tool-tip text.

URL: http://plnkr.co/edit/ZRiSriYJaaU0NLzr5RLR?p=preview
Please suggest how to show large text in tool-tip in 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>

The issue seems limited to Firefox... On Google Crome (52.0.2743.116 m) it looks fine, to me (tooltip text is broken on 3 lines, and tooltip window is right-aligned in the browser window... — MarcoS
– MarcoS, Commented Sep 1, 2016 at 15:03

M. Michal · Accepted Answer · 2016-09-02 20:11:33Z

0

You can use \n in a cellTooltip text to break long lines.

Like

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

answered Sep 2, 2016 at 20:11

M. Michal

12

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular ui-grid tooltip with large text size

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related