LP#1740412 Grid cell content tooltips

Display a tooltip (popover), containing the full grid contents, when
mousing over a grid cell.  This allows users to see the full contents of
a cell without having to resize the grid column.

This applies to text contents and pre-compiled HTML contents.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Michele Morgan <mmorgan@noblenet.org>
Signed-off-by: Kathy Lussier <klussier@masslnc.org>

diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2
index ff61b4a..f59fbef 100644 (file)
--- a/Open-ILS/src/templates/staff/css/style.css.tt2
+++ b/Open-ILS/src/templates/staff/css/style.css.tt2
@@ -464,6 +464,14 @@ table.list tr.selected td { /* deprecated? */
   box-shadow: none;
 }
 
+.eg-grid-tooltip {
+  font-size: 110%;
+}
+/* avoid visited "blue" links over black background */
+.eg-grid-tooltip a {
+  color: white;
+}
+
 
 /* ----------------------------------------------------------------------
  * /Grid

diff --git a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
index 303e191..a7722f6 100644 (file)
--- a/Open-ILS/src/templates/staff/share/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
@@ -327,8 +327,12 @@
 
           <!-- if the cell comes with its own template,
                translate that content into HTML and insert it here -->
-          <span ng-if="col.template && !col.compiled" style="padding-left:5px; padding-right:10px;"
-            ng-bind-html="translateCellTemplate(col, item)">
+          <span ng-if="col.template && !col.compiled" 
+            style="padding-left:5px; padding-right:10px;"
+            ng-init="html_value=translateCellTemplate(col, item)">
+            <span uib-tooltip-html="html_value" tooltip-class="eg-grid-tooltip">
+              <span ng-bind-html="html_value"></span>
+            </span>
           </span>
 
           <span ng-if="col.template && col.compiled" style="padding-left:5px; padding-right:10px;"
@@ -337,8 +341,12 @@
 
           <!-- otherwise, simply display the item value, which may 
                pass through datatype-specific filtering. -->
-          <span ng-if="!col.template" style="padding-left:5px; padding-right:10px;">
-            {{itemFieldValue(item, col) | egGridValueFilter:col:item}}
+          <span ng-if="!col.template" 
+            ng-init="text_value = (itemFieldValue(item, col) | egGridValueFilter:col:item)"
+            uib-tooltip="{{text_value}}"
+            tooltip-class="eg-grid-tooltip"
+            style="padding-left:5px; padding-right:10px;">
+            {{text_value}}
           </span>
       </div>
     </div>