Merge pull request #238 from flacoman91/kill-tooltips

Disable mouseover tooltip in print mode
cfpb · Apr 20, 2020 · 7f5bff1 · 7f5bff1
2 parents 57c5908 + b04bd8f
commit 7f5bff1
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 11 deletions.
diff --git a/src/TileChartMap.jsx b/src/TileChartMap.jsx
@@ -56,7 +56,7 @@ export class TileChartMap extends React.Component {
     const toggleState = this._toggleState
     const componentProps = this.props
     const mapElement = document.getElementById( 'tile-chart-map' )
-    const { dataNormalization } = componentProps
+    const { dataNormalization, hasTip } = componentProps
     const width = mapElement ? mapElement.clientWidth : 700;
     const data = updateData( this.props )
 
@@ -68,6 +68,7 @@ export class TileChartMap extends React.Component {
         // custom event handlers we can pass on
         click: toggleState.bind( componentProps )
       },
+      hasTip,
       width
     }
 
@@ -136,6 +137,7 @@ export const mapStateToProps = state => {
   return {
     data: processStates( state ),
     dataNormalization: state.map.dataNormalization,
+    hasTip: !printMode,
     printClass: printMode ? 'print' : '',
     stateFilters: [ ...refStateFilters ],
     width

diff --git a/src/TileChartMap.less b/src/TileChartMap.less
@@ -176,12 +176,6 @@ x/y positioning on the SVG elements.
             &.selected {
                 stroke: rgba(0, 45, 114, 1);
             }
-
-            &:hover {
-                stroke: rgba(0, 45, 114, 1);
-                stroke-width: 2px !important;
-            }
-
         }
     }
 
@@ -225,6 +219,17 @@ x/y positioning on the SVG elements.
     }
 }
 
+.cfpb-chart[data-chart-type="tile_map"]:not(.print) {
+    .highcharts-map-series {
+        .highcharts-point {
+            &:hover {
+                stroke: rgba(0, 45, 114, 1);
+                stroke-width: 2px !important;
+            }
+        }
+    }
+}
+
 @media @tablet-sm {
     .cfpb-chart[data-chart-type="tile_map"] {
         width: ~"calc(100% - 20px)";

diff --git a/src/TileMap/index.js b/src/TileMap/index.js
@@ -362,7 +362,7 @@ const colors = [
    Tile Map class */
 
 class TileMap {
-  constructor( { el, data, isPerCapita, events, height, width } ) {
+  constructor( { el, data, isPerCapita, events, height, hasTip, width } ) {
     const scale = makeScale( data, colors )
     const quantiles = scale.quantiles()
 
@@ -396,7 +396,7 @@ class TileMap {
       },
       tooltip: {
         className: 'tooltip',
-        enabled: true,
+        enabled: hasTip,
         headerFormat: '',
         pointFormatter: tooltipFormatter,
         useHTML: true
@@ -407,6 +407,11 @@ class TileMap {
             enabled: true,
             formatter: tileFormatter,
             useHTML: true
+          },
+          states: {
+            hover: {
+              enabled: hasTip
+            }
           }
         }
       },
@@ -425,8 +430,8 @@ class TileMap {
     };
 
     // our custom passing of information
-    if ( events ) {
-      options.plotOptions.series.events = events;
+    if ( events && hasTip ) {
+      options.plotOptions.series.events = events
       options.plotOptions.series.point = {
         events: {
           mouseOver: mouseoverPoint,

diff --git a/src/__tests__/TileChartMap.spec.jsx b/src/__tests__/TileChartMap.spec.jsx
@@ -216,6 +216,7 @@ describe( 'component: TileChartMap', () => {
           ]
         ],
         dataNormalization: false,
+        hasTip: true,
         printClass: '',
         stateFilters: [ 'TX' ],
         width: 1000

diff --git a/src/print.less b/src/print.less
@@ -68,6 +68,7 @@
   .state-heading .clear,
   .state-navigation,
   .m-pagination,
+  .warning,
   footer {
     display: none !important;
   }