Add tooltips to eksplisit teks

components/teks/teks-drawer.js

@@ -15,7 +15,10 @@ import {
   IconButton,
   Box,
   useMediaQuery,
-  Snackbar
+  Snackbar,
+  Tooltip,
+  Zoom,
+  withStyles
 } from '@material-ui/core'
 
 import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'
@@ -165,6 +168,14 @@ const alignTeks = (langArray, isMobile) => {
   }
 }
 
+const ExplicitTooltip = withStyles(() => ({
+  tooltip: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    backgroundColor: 'rgba(245, 0, 87, 0.8)'
+  }
+}))(Tooltip)
+
 export default function TeksDrawer({teks, anTeks, komante}) {
   const [session] = useSession()
   const router = useRouter()
@@ -279,7 +290,9 @@ export default function TeksDrawer({teks, anTeks, komante}) {
               <Typography style={{marginTop: '0.8em'}} variant='h4'>
                 {anTeks.tit}
                 {anTeks.eksplisit && (
-                  <ExplicitIcon style={{marginLeft: 10}} color='secondary' />
+                  <ExplicitTooltip title='Explicit Lyrics' placement='bottom' TransitionComponent={Zoom}>
+                    <ExplicitIcon style={{marginLeft: 10}} color='secondary' />
+                  </ExplicitTooltip>
                 )}
                 {komante && (
                   <VweKomante komante={komante} teks={anTeks} />