Applied what we learned with calendar picker to the tooltip in method-picker.vue

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/method-picker.vue

@@ -7,7 +7,6 @@
       Sampling Methods/Sub-locations:
       <span
         ref="tooltip"
-        class="usa-tooltip"
         data-position="right"
         title="The names used in dropdown menu are often specific to a particular monitoring location and describe sampling details used to distinguish time-series of the same type--examples include variations in physical location and sensor type."
       >
@@ -43,7 +42,7 @@
 
 <script>
 import {computed, ref, onMounted} from 'vue';
-import uswds_tooltip from 'uswds-components/usa-tooltip/src/index.js';
+import uswdsTooltip from 'uswds-components/usa-tooltip/src/index.js';
 
 import config from 'ui/config';
 
@@ -71,8 +70,21 @@ export default {
       return props.sortedIvMethods.methods.findIndex(method => method.pointCount === 0) > -1;
     });
 
+    const initializeUSWDSTooltip = function() {
+      tooltip.value.setAttribute('class', 'usa-tooltip');
+      uswdsTooltip.on(tooltip.value);
+    };
+
     onMounted(() => {
-      uswds_tooltip.on(tooltip.value);
+      if (document.readyState === 'complete') {
+        initializeUSWDSTooltip();
+      } else {
+        document.addEventListener('readystatechange', (event) => {
+          if (event.target.readyState === 'complete') {
+            initializeUSWDSTooltip();
+          }
+        });
+      }
     });
 
     function selectThisMethod(event) {