text now shows in dom but is not clickable

assets/src/scripts/d3-rendering/info-tooltip.js

@@ -12,7 +12,7 @@ import config from 'ui/config.js';
 import uswds_tooltip from 'uswds-components/usa-tooltip/src/index.js';
 
 export const appendInfoTooltip = function(elem, text, position = 'right') {
-	let tooltip = elem.append('div')
+    const tooltip = elem.append('div')
         .attr('class', 'usa-tooltip')
         .attr('data-position', position)
         .attr('title', text);
@@ -20,6 +20,6 @@ export const appendInfoTooltip = function(elem, text, position = 'right') {
         .attr('class', 'usa-icon')
         .html(`<use xlink:href="${config.STATIC_URL}img/sprite.svg#info"></use>`);
 
-    // Need to initialize USWDS tooltip explictly after page load
+    // Need to initialize USWDS tooltip explicitly after page load
     uswds_tooltip.on(elem.node());
 };

assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js

@@ -106,6 +106,13 @@ const drawAllMedianPoints = function(elem, {visible, xscale, yscale, seriesPoint
 };
 
 const drawTitle = function(elem, store, siteNo, agencyCode, sitename, showMLName, showTooltip) {
+    const parameterDescription = (parameter) => {
+        if (parameter) {
+            return Object.prototype.hasOwnProperty.call(parameter, 'description') ?
+                parameter.description : 'No description available';
+        }
+    };
+
     let titleDiv = elem.append('div')
         .classed('time-series-graph-title', true);
 
@@ -119,7 +126,7 @@ const drawTitle = function(elem, store, siteNo, agencyCode, sitename, showMLName
         .call(link(store, (elem, {title, parameter}) => {
             elem.html(title);
             if (showTooltip) {
-                elem.call(appendInfoTooltip, parameter ? parameter.description : 'No description available', 'bottom');
+                elem.call(appendInfoTooltip, parameterDescription(parameter), 'bottom');
             }
         }, createStructuredSelector({
             title: getTitle('primary'),
@@ -130,7 +137,7 @@ const drawTitle = function(elem, store, siteNo, agencyCode, sitename, showMLName
         .call(link(store, (elem, {title, parameter}) => {
             elem.html(title);
             if (showTooltip && parameter) {
-                elem.call(appendInfoTooltip, parameter ? parameter.description : 'No description available', 'bottom');
+                elem.call(appendInfoTooltip, parameterDescription(parameter), 'bottom');
             }
         }, createStructuredSelector({
             title: getTitle('secondary'),

assets/src/scripts/monitoring-location/selectors/hydrograph-parameters-selector.js

@@ -7,6 +7,8 @@ import {getSelectedParameterCode} from 'ml/selectors/hydrograph-state-selector';
  */
 export const getHydrographParameters = state => state.hydrographParameters || {};
 
+export const getParameterName = (state, parameterCode) => state.hydrographParameters[parameterCode]['name'] || '';
+
 /*
  * Returns a selector function which returns the most recently reported value for the primary parameter
  * @return {function}