From 8f99a3ff5eb93ab24790115bd1fcd3c183274a71 Mon Sep 17 00:00:00 2001
From: dctalbot <dctalbot@umich.edu>
Date: Fri, 22 Nov 2019 11:25:09 -0600
Subject: [PATCH] style tooltip labels

---
 web/src/app/util/SpeedDial.js | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/web/src/app/util/SpeedDial.js b/web/src/app/util/SpeedDial.js
index f750fbe032..6514fef6e6 100644
--- a/web/src/app/util/SpeedDial.js
+++ b/web/src/app/util/SpeedDial.js
@@ -1,9 +1,23 @@
 import React, { useState } from 'react'
 import p from 'prop-types'
 import { SpeedDial, SpeedDialIcon, SpeedDialAction } from '@material-ui/lab'
+import { makeStyles } from '@material-ui/styles'
+
+const useStyles = makeStyles(theme => ({
+  speedDial: {
+    position: 'fixed',
+    bottom: '2em',
+    right: '2em',
+    zIndex: 9001,
+  },
+  staticTooltipLabel: {
+    whiteSpace: 'nowrap',
+  },
+}))
 
 export default function CustomSpeedDial(props) {
   const [open, setOpen] = useState(false)
+  const classes = useStyles()
 
   const doToggle = () => setOpen(!open)
   const doOpen = () => setOpen(true)
@@ -21,12 +35,7 @@ export default function CustomSpeedDial(props) {
       onMouseEnter={doOpen}
       onMouseLeave={doClose}
       open={open}
-      style={{
-        position: 'fixed',
-        bottom: '2em',
-        right: '2em',
-        zIndex: 9001,
-      }}
+      className={classes.speedDial}
     >
       {props.actions
         .slice() // TODO why this?
@@ -36,8 +45,8 @@ export default function CustomSpeedDial(props) {
             key={idx}
             icon={action.icon}
             tooltipTitle={action.label}
-            // tooltipOpen // TODO set to persist speed dial on mobile. Clunky default styles need to be overridden.
-            // TooltipClasses={{ tooltip: { whiteSpace: 'nowrap' } }}
+            tooltipOpen
+            classes={{ staticTooltipLabel: classes.staticTooltipLabel }}
             aria-label={action.label}
             onClick={() => {
               setOpen(false)