npm - @cdc/map - Versions diffs - 4.23.6 → 4.23.7 - Mend

@cdc/map 4.23.6 → 4.23.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/cdcmap.js +21749 -21467
package/index.html +7 -6
package/package.json +3 -3
package/src/CdcMap.jsx +28 -76
package/src/components/CountyMap.jsx +11 -3
package/src/components/EditorPanel.jsx +68 -67
package/src/data/initial-state.js +2 -1
package/src/hooks/useTooltip.js +135 -0
package/src/scss/editor-panel.scss +1 -7
package/src/scss/main.scss +1 -1
package/src/scss/map.scss +202 -203
package/LICENSE +0 -201
package/src/scss/tooltips.scss +0 -36

package/index.html CHANGED Viewed

@@ -16,12 +16,13 @@
   <body>
     <!-- DEFAULT EXAMPLES -->
-    <div class="react-container react-container--maps" data-config="/examples/default-usa.json"></div>
+    <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa.json"></div> -->
+    <div class="react-container react-container--maps" data-config="/examples/default-county.json"></div>
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-geocode.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-usa-regions.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-single-state.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-world.json"></div> -->
-    <!--   <div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-us.json"></div>-->
+    <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-us.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-world.json"></div> -->
     <!-- TP4 EXAMPLES -->
@@ -29,15 +30,15 @@
     <!-- <div class="react-container react-container--maps" data-config="/examples/custom-map-layers.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-stateBAD.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/example-world-map.json"></div> -->
-    <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div>  -->
+    <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div> -->
     <!-- TP4 EXAMPLES -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div> -->
-    <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state-no-territories.json"></div> -->
+    <div class="react-container react-container--maps" data-config="/examples/example-city-state-no-territories.json"></div>
     <!-- <div class="react-container react-container--maps" data-config="/examples/example-world-map.json"></div> -->
-    <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div>  -->
+    <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div> -->
-    <div class="react-container" data-config="/examples/example-hex-map-with-filter.json"></div>
+    <!-- <div class="react-container" data-config="/examples/example-hex-map-with-filter.json"></div> -->
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script type="module" src="./src/index.jsx"></script>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/map",
-  "version": "4.23.6",
+  "version": "4.23.7",
   "description": "React component for visualizing tabular data on a map of the United States or the world.",
   "moduleName": "CdcMap",
   "main": "dist/cdcmap",
@@ -24,7 +24,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/core": "^4.23.6",
+    "@cdc/core": "^4.23.7",
     "@emotion/core": "^10.0.28",
     "@emotion/react": "^11.1.5",
     "@hello-pangea/dnd": "^16.2.0",
@@ -51,5 +51,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "aaed0388b487adfeb3e7e278b4ce74df09cbaade"
+  "gitHead": "6c7ac5215dcf3bc1cc7d199089c8c2e75f53a93e"
 }

package/src/CdcMap.jsx CHANGED Viewed

@@ -51,6 +51,7 @@ import SingleStateMap from './components/SingleStateMap' // Future: Lazy
 import UsaMap from './components/UsaMap' // Future: Lazy
 import UsaRegionMap from './components/UsaRegionMap' // Future: Lazy
 import WorldMap from './components/WorldMap' // Future: Lazy
+import useTooltip from './hooks/useTooltip'
 // Data props
 const stateKeys = Object.keys(supportedStates)
@@ -999,81 +1000,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
   }
-  const applyTooltipsToGeo = (geoName, row, returnType = 'string') => {
-    if (!row) return
-    let toolTipText = ''
-    // Adds geo label, ie State: Georgia
-    let stateOrCounty = state.general.geoType === 'us' ? 'State: ' : state.general.geoType === 'us-county' || state.general.geoType === 'single-state' ? 'County: ' : ''
-    // check the override
-    stateOrCounty = state.general.geoLabelOverride !== '' ? state.general.geoLabelOverride + ': ' : stateOrCounty
-    if (state.general.geoType === 'us-county' && state.general.type !== 'us-geocode') {
-      let stateFipsCode = row[state.columns.geo.name].substring(0, 2)
-      const stateName = supportedStatesFipsCodes[stateFipsCode]
-      toolTipText += !state.general.hideGeoColumnInTooltip ? `<strong>Location:  ${stateName}</strong><br/>` : `<strong>${stateName}</strong><br/>`
-    }
-    toolTipText += !state.general.hideGeoColumnInTooltip ? `<strong>${stateOrCounty}${displayGeoName(geoName)}</strong>` : `<strong>${displayGeoName(geoName)}</strong>`
-    if (('data' === state.general.type || state.general.type === 'bubble' || state.general.type === 'us-geocode' || state.general.type === 'world-geocode') && undefined !== row) {
-      toolTipText += `<dl>`
-      Object.keys(state.columns).forEach(columnKey => {
-        const column = state.columns[columnKey]
-        if (true === column.tooltip) {
-          let label = column.label?.length > 0 ? column.label : ''
-          let value
-          if (state.legend.specialClasses && state.legend.specialClasses.length && typeof state.legend.specialClasses[0] === 'object') {
-            // THIS CODE SHOULD NOT ACT ON THE ENTIRE ROW OF KEYS BUT ONLY THE ONE KEY IN THE SPECIAL CLASS
-            for (let i = 0; i < state.legend.specialClasses.length; i++) {
-              // Special Classes label in HOVERS should only apply to selected special class key
-              // - you have to ALSO check that the key matches - putting here otherwise the if stmt too long
-              if (column.name === state.legend.specialClasses[i].key) {
-                if (String(row[state.legend.specialClasses[i].key]) === state.legend.specialClasses[i].value) {
-                  value = displayDataAsText(state.legend.specialClasses[i].label, columnKey)
-                  break
-                }
-              }
-            }
-          }
-          if (!value) {
-            value = displayDataAsText(row[column.name], columnKey)
-          }
-          if (0 < value.length) {
-            // Only spit out the tooltip if there's a value there
-            toolTipText += state.general.hidePrimaryColumnInTooltip ? `<div><dd>${value}</dd></div>` : `<div><dt>${label}</dt><dd>${value}</dd></div>`
-          }
-        }
-      })
-      toolTipText += `</dl>`
-    }
-    // We convert the markup into JSX and add a navigation link if it's going into a modal.
-    if ('jsx' === returnType) {
-      toolTipText = [<div key='modal-content'>{parse(toolTipText)}</div>]
-      if (state.columns.hasOwnProperty('navigate') && row[state.columns.navigate.name]) {
-        toolTipText.push(
-          // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-          <span className='navigation-link' key='modal-navigation-link' onClick={() => navigationHandler(row[state.columns.navigate.name])}>
-            {state.tooltips.linkLabel}
-            <ExternalIcon className='inline-icon ml-1' />
-          </span>
-        )
-      }
-    }
-    return toolTipText
-  }
   // if city has a hyphen then in tooltip it ends up UPPER CASE instead of just regular Upper Case
   // - this function is used to prevent that and instead give the formatting that is wanted
   // Example:  Desired city display in tooltip on map: "Inter-Tribal Indian Reservation"
@@ -1173,6 +1099,30 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
   }
+  // todo: convert to store or context eventually.
+  const { buildTooltip } = useTooltip({ state, displayGeoName, displayDataAsText, supportedStatesFipsCodes })
+  const applyTooltipsToGeo = (geoName, row, returnType = 'string') => {
+    let toolTipText = buildTooltip(row, geoName, '')
+    // We convert the markup into JSX and add a navigation link if it's going into a modal.
+    if ('jsx' === returnType) {
+      toolTipText = [<div key='modal-content'>{parse(toolTipText)}</div>]
+      if (state.columns.hasOwnProperty('navigate') && row[state.columns.navigate.name]) {
+        toolTipText.push(
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+          <ul className='navigation-link' key='modal-navigation-link' onClick={() => navigationHandler(row[state.columns.navigate.name])}>
+            {state.tooltips.linkLabel}
+            <ExternalIcon className='inline-icon ml-1' />
+          </ul>
+        )
+      }
+    }
+    return toolTipText
+  }
   const navigationHandler = urlString => {
     // Call custom navigation method if passed
     if (customNavigationHandler) {
@@ -1639,7 +1589,9 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         )}
         {!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && (
           <section className={`cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title} ref={innerContainerRef}>
-            {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && <ReactTooltip id='tooltip' variant='light' float={true} className={`${tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'}`} />}
+            {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && (
+              <ReactTooltip id='tooltip' float={true} className={`${tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'}`} style={{ background: `rgba(255,255,255, ${state.tooltips.opacity / 100})`, color: 'black' }} />
+            )}
             {title && (
               <header className={general.showTitle === true ? 'visible' : 'hidden'} {...(!general.showTitle || !state.general.title ? { 'aria-hidden': true } : { 'aria-hidden': false })}>
                 {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}

package/src/components/CountyMap.jsx CHANGED Viewed

@@ -9,7 +9,6 @@ import Loading from '@cdc/core/components/Loading'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import topoJSON from '../data/county-map.json'
-import { formatPrefix } from 'd3'
 import useMapLayers from '../hooks/useMapLayers'
 const sortById = (a, b) => {
@@ -379,8 +378,17 @@ const CountyMap = props => {
   return (
     <ErrorBoundary component='CountyMap'>
-      <canvas ref={canvasRef} aria-label={handleMapAriaLabels(state)} onMouseMove={canvasHover} onClick={canvasClick}></canvas>
-      <div ref={tooltipRef} id='canvas-tooltip' className='tooltip'></div>
+      <canvas
+        ref={canvasRef}
+        aria-label={handleMapAriaLabels(state)}
+        onMouseMove={canvasHover}
+        onMouseOut={() => {
+          tooltipRef.current.style.display = 'none'
+          tooltipRef.current.setAttribute('data-index', null)
+        }}
+        onClick={canvasClick}
+      ></canvas>
+      <div ref={tooltipRef} id='canvas-tooltip' className='tooltip' style={{ background: `rgba(255,255,255,${state.tooltips.opacity / 100})` }}></div>
       <button className={`btn btn--reset`} onClick={onReset} ref={resetButton} tabIndex='0'>
         Reset Zoom
       </button>

package/src/components/EditorPanel.jsx CHANGED Viewed

@@ -1573,7 +1573,7 @@ const EditorPanel = props => {
                         handleEditorChanges('displayStateLabels', event.target.checked)
                       }}
                     />
-                    <span className='edit-label'>Display state labels</span>
+                    <span className='edit-label'>Show state labels</span>
                   </label>
                 )}
               </AccordionItemPanel>
@@ -1841,7 +1841,7 @@ const EditorPanel = props => {
                               editColumn('primary', 'dataTable', event.target.checked)
                             }}
                           />
-                          <span className='edit-label'>Display in Data Table</span>
+                          <span className='edit-label'>Show in Data Table</span>
                         </label>
                       </li>
                       <li>
@@ -1853,7 +1853,7 @@ const EditorPanel = props => {
                               editColumn('primary', 'tooltip', event.target.checked)
                             }}
                           />
-                          <span className='edit-label'>Display in Tooltips</span>
+                          <span className='edit-label'>Show in Tooltips</span>
                         </label>
                       </li>
                     </ul>
@@ -2068,7 +2068,7 @@ const EditorPanel = props => {
                                   editColumn(val, 'dataTable', event.target.checked)
                                 }}
                               />
-                              <span className='edit-label'>Display in Data Table</span>
+                              <span className='edit-label'>Show in Data Table</span>
                             </label>
                           </li>
                           <li>
@@ -2080,7 +2080,7 @@ const EditorPanel = props => {
                                   editColumn(val, 'tooltip', event.target.checked)
                                 }}
                               />
-                              <span className='edit-label'>Display in Tooltips</span>
+                              <span className='edit-label'>Show in Tooltips</span>
                             </label>
                           </li>
                         </ul>
@@ -2829,70 +2829,71 @@ const EditorPanel = props => {
                     <span className='edit-label'>Bubble Map has extra border</span>
                   </label>
                 )}
-                {state.general.geoType === 'us' ||
-                  state.general.geoType === 'us-county' ||
-                  (state.general.geoType === 'world' && (
-                    <label>
-                      <span className='edit-label'>City Style</span>
-                      <select
-                        value={state.visual.cityStyle || false}
-                        onChange={event => {
-                          handleEditorChanges('handleCityStyle', event.target.value)
-                        }}
-                      >
-                        <option value='circle'>Circle</option>
-                        <option value='pin'>Pin</option>
-                      </select>
-                    </label>
-                  ))}
+                {(state.general.geoType === 'us' || state.general.geoType === 'us-county' || state.general.geoType === 'world') && (
+                  <label>
+                    <span className='edit-label'>City Style</span>
+                    <select
+                      value={state.visual.cityStyle || false}
+                      onChange={event => {
+                        handleEditorChanges('handleCityStyle', event.target.value)
+                      }}
+                    >
+                      <option value='circle'>Circle</option>
+                      <option value='pin'>Pin</option>
+                    </select>
+                  </label>
+                )}
+                <label htmlFor='opacity'>
+                  <TextField type='number' min={0} max={100} value={state.tooltips.opacity ? state.tooltips.opacity : 100} section='tooltips' fieldName='opacity' label='Tooltip Opacity (%)' updateField={updateField} />
+                </label>
+              </AccordionItemPanel>
+            </AccordionItem>
+            <AccordionItem>
+              <AccordionItemHeading>
+                <AccordionItemButton>Custom Map Layers</AccordionItemButton>
+              </AccordionItemHeading>
+              <AccordionItemPanel>
+                {state.map.layers.length === 0 && <p>There are currently no layers.</p>}
+                {state.map.layers.map((layer, index) => {
+                  return (
+                    <>
+                      <Accordion allowZeroExpanded>
+                        <AccordionItem className='series-item map-layers-list'>
+                          <AccordionItemHeading className='series-item__title map-layers-list--title'>
+                            <AccordionItemButton>{`Layer ${index + 1}: ${layer.name}`}</AccordionItemButton>
+                          </AccordionItemHeading>
+                          <AccordionItemPanel>
+                            <div className='map-layers-panel'>
+                              <label htmlFor='layerName'>Layer Name:</label>
+                              <input type='text' name='layerName' value={layer.name} onChange={e => handleMapLayer(e, index, 'name')} />
+                              <label htmlFor='layerFilename'>File:</label>
+                              <input type='text' name='layerFilename' value={layer.url} onChange={e => handleMapLayer(e, index, 'url')} />
+                              <label htmlFor='layerNamespace'>TOPOJSON Namespace:</label>
+                              <input type='text' name='layerNamespace' value={layer.namespace} onChange={e => handleMapLayer(e, index, 'namespace')} />
+                              <label htmlFor='layerFill'>Fill Color:</label>
+                              <input type='text' name='layerFill' value={layer.fill} onChange={e => handleMapLayer(e, index, 'fill')} />
+                              <label htmlFor='layerFill'>Fill Opacity (%):</label>
+                              <input type='number' min={0} max={100} name='layerFill' value={layer.fillOpacity ? layer.fillOpacity * 100 : ''} onChange={e => handleMapLayer(e, index, 'fillOpacity')} />
+                              <label htmlFor='layerStroke'>Stroke Color:</label>
+                              <input type='text' name='layerStroke' value={layer.stroke} onChange={e => handleMapLayer(e, index, 'stroke')} />
+                              <label htmlFor='layerStroke'>Stroke Width:</label>
+                              <input type='number' min={0} max={5} name='layerStrokeWidth' value={layer.strokeWidth} onChange={e => handleMapLayer(e, index, 'strokeWidth')} />
+                              <label htmlFor='layerTooltip'>Tooltip:</label>
+                              <textarea name='layerTooltip' value={layer.tooltip} onChange={e => handleMapLayer(e, index, 'tooltip')}></textarea>
+                              <button onClick={e => handleRemoveLayer(e, index)}>Remove Layer</button>
+                            </div>
+                          </AccordionItemPanel>
+                        </AccordionItem>
+                      </Accordion>
+                    </>
+                  )
+                })}
+                <button className={'btn full-width'} onClick={handleAddLayer}>
+                  Add Map Layer
+                </button>
               </AccordionItemPanel>
             </AccordionItem>
-            {/* <AccordionItem>
-                <AccordionItemHeading>
-                  <AccordionItemButton>Custom Map Layers</AccordionItemButton>
-                </AccordionItemHeading>
-                <AccordionItemPanel>
-                  {state.map.layers.length === 0 && <p>There are currently no layers.</p>}
-                  {state.map.layers.map((layer, index) => {
-                    return (
-                      <>
-                        <Accordion allowZeroExpanded>
-                          <AccordionItem className='series-item map-layers-list'>
-                            <AccordionItemHeading className='series-item__title map-layers-list--title'>
-                              <AccordionItemButton>{`Layer ${index + 1}: ${layer.name}`}</AccordionItemButton>
-                            </AccordionItemHeading>
-                            <AccordionItemPanel>
-                              <div className='map-layers-panel'>
-                                <label htmlFor='layerName'>Layer Name:</label>
-                                <input type='text' name='layerName' value={layer.name} onChange={e => handleMapLayer(e, index, 'name')} />
-                                <label htmlFor='layerFilename'>File:</label>
-                                <input type='text' name='layerFilename' value={layer.url} onChange={e => handleMapLayer(e, index, 'url')} />
-                                <label htmlFor='layerNamespace'>TOPOJSON Namespace:</label>
-                                <input type='text' name='layerNamespace' value={layer.namespace} onChange={e => handleMapLayer(e, index, 'namespace')} />
-                                <label htmlFor='layerFill'>Fill Color:</label>
-                                <input type='text' name='layerFill' value={layer.fill} onChange={e => handleMapLayer(e, index, 'fill')} />
-                                <label htmlFor='layerFill'>Fill Opacity (%):</label>
-                                <input type='number' min={0} max={100} name='layerFill' value={layer.fillOpacity ? layer.fillOpacity * 100 : ''} onChange={e => handleMapLayer(e, index, 'fillOpacity')} />
-                                <label htmlFor='layerStroke'>Stroke Color:</label>
-                                <input type='text' name='layerStroke' value={layer.stroke} onChange={e => handleMapLayer(e, index, 'stroke')} />
-                                <label htmlFor='layerStroke'>Stroke Width:</label>
-                                <input type='number' min={0} max={5} name='layerStrokeWidth' value={layer.strokeWidth} onChange={e => handleMapLayer(e, index, 'strokeWidth')} />
-                                <label htmlFor='layerTooltip'>Tooltip:</label>
-                                <textarea name='layerTooltip' value={layer.tooltip} onChange={e => handleMapLayer(e, index, 'tooltip')}></textarea>
-                                <button onClick={e => handleRemoveLayer(e, index)}>Remove Layer</button>
-                              </div>
-                            </AccordionItemPanel>
-                          </AccordionItem>
-                        </Accordion>
-                      </>
-                    )
-                  })}
-                  <button className={'btn full-width'} onClick={handleAddLayer}>
-                    Add Map Layer
-                  </button>
-                </AccordionItemPanel>
-              </AccordionItem> */}
           </Accordion>
           <AdvancedEditor loadConfig={loadConfig} state={state} convertStateToConfig={convertStateToConfig} />
         </section>

package/src/data/initial-state.js CHANGED Viewed

@@ -77,7 +77,8 @@ export default {
   tooltips: {
     appearanceType: 'hover',
     linkLabel: 'Learn More',
-    capitalizeLabels: true
+    capitalizeLabels: true,
+    opacity: 90
   },
   runtime: {
     editorErrorMessage: []

package/src/hooks/useTooltip.js ADDED Viewed

@@ -0,0 +1,135 @@
+const useTooltip = props => {
+  const { state, displayGeoName, displayDataAsText, supportedStatesFipsCodes } = props
+  /**
+   * On county maps there's a need to append the state name
+   * @param {String} toolTipText - previous tooltip text to build upon
+   * @param {Object} row - row of data to lookup fips code with using the geo column.
+   * @returns {String} toolTipText - new toolTipText
+   */
+  const handleTooltipStateNameColumn = (toolTipText, row) => {
+    const { geoType, type, hideGeoColumnInTooltip } = state.general
+    if (geoType === 'us-county' && type !== 'us-geocode') {
+      let stateFipsCode = row[state.columns.geo.name].substring(0, 2)
+      const stateName = supportedStatesFipsCodes[stateFipsCode]
+      toolTipText += hideGeoColumnInTooltip ? `<strong>${stateName}</strong><br/>` : `<strong>Location:  ${stateName}</strong><br/>`
+    }
+    return toolTipText
+  }
+  /**
+   * On county and state maps, adds the ability to hide the geo column name (prefix)
+   * @param {String} geoName - feature name
+   * @returns {String} text to be appended to toolTipText
+   */
+  const handleTooltipGeoColumn = geoName => {
+    const { hideGeoColumnInTooltip } = state.general
+    const handleTooltipPrefix = toolTipText => {
+      const { geoType, geoLabelOverride } = state.general
+      switch (geoType) {
+        case 'us':
+          toolTipText = 'State: '
+          break
+        case 'us-county':
+          toolTipText = 'County: '
+          break
+        case 'single-state':
+          toolTipText = 'County: '
+          break
+        default:
+          toolTipText = ''
+          break
+      }
+      if (geoLabelOverride) toolTipText = `${geoLabelOverride}: `
+      return toolTipText
+    }
+    const prefix = handleTooltipPrefix()
+    if (hideGeoColumnInTooltip) return `<strong>${displayGeoName(geoName)}</strong>`
+    return `<p class="tooltip-heading">${prefix}${displayGeoName(geoName)}</p>`
+  }
+  /**
+   * Handles special class descriptions in tooltips
+   */
+  const handleTooltipSpecialClassText = (specialClasses, column, row, value, columnKey) => {
+    if (specialClasses && specialClasses.length && typeof specialClasses[0] === 'object') {
+      for (const specialClass of specialClasses) {
+        if (column.name === specialClass.key && String(row[specialClass.key]) === specialClass.value) {
+          value = displayDataAsText(specialClass.label, columnKey)
+          break
+        }
+      }
+    }
+    return value
+  }
+  const handleTooltipPrimaryColumn = (tooltipValue, column) => {
+    const { hidePrimaryColumnInTooltip } = state.general
+    let tooltipPrefix = column.label?.length > 0 ? column.label : ''
+    if (hidePrimaryColumnInTooltip || !tooltipPrefix) return `<li class="tooltip-body">${tooltipValue}</li>`
+    return `<li class="tooltip-body">${tooltipPrefix}: ${tooltipValue}</li>`
+  }
+  /**
+   *
+   * @param {String} toolTipText - previous tooltipText to build upon
+   * @param {Object} row - row of data
+   * @returns {String} new tooltipText value
+   */
+  const handleTooltipColumns = (toolTipText, row) => {
+    const tooltipEnabledMaps = ['data', 'bubble', 'us-geocode', 'world-geocode', 'map']
+    const {
+      general: { type: currentMapType },
+      columns,
+      legend: { specialClasses }
+    } = state
+    if (tooltipEnabledMaps.includes(currentMapType) && undefined !== row) {
+      toolTipText += `<ul className="capitalize">`
+      // if tooltips are allowed, loop through each column
+      Object.keys(columns).forEach(columnKey => {
+        const column = state.columns[columnKey]
+        if (column.tooltip) {
+          let tooltipValue = handleTooltipSpecialClassText(specialClasses, column, row, '', columnKey)
+          if (!tooltipValue) {
+            tooltipValue = displayDataAsText(row[column.name], columnKey)
+          }
+          toolTipText += handleTooltipPrimaryColumn(tooltipValue, column)
+        }
+      })
+      toolTipText += `</ul>`
+    }
+    return toolTipText
+  }
+  const buildTooltip = (row, geoName, toolTipText = '') => {
+    if (!row) return
+    // Handle County Location Columns
+    toolTipText += handleTooltipStateNameColumn(toolTipText, row)
+    // Handle Data > Geo Column In tooltips
+    toolTipText += handleTooltipGeoColumn(geoName)
+    // Handle Data > Primary Column in tooltips
+    toolTipText = handleTooltipColumns(toolTipText, row)
+    return toolTipText
+  }
+  return {
+    buildTooltip
+  }
+}
+export default useTooltip

package/src/scss/editor-panel.scss CHANGED Viewed

@@ -130,13 +130,7 @@
     .remove-column {
       font-size: 13px;
     }
-    .__react_component_tooltip {
-      padding: 5px;
-      max-width: 300px;
-    }
-    .tooltip {
-      position: relative;
-    }
     .helper {
       position: relative;
       opacity: 0.7;

package/src/scss/main.scss CHANGED Viewed

@@ -3,6 +3,7 @@
 @import 'variables';
 @import 'editor-panel';
 @import 'filters';
+@import '@cdc/core/styles/v2/components/ui/tooltip';
 .cdc-map-outer-container {
   position: relative;
@@ -20,7 +21,6 @@
 }
 .cdc-map-inner-container {
-  @import './tooltips';
   @import './map';
   @import './sidebar';
   @import './datatable';