update tooltip styling

- set default transparent to remove sidebar tooltips
- increase delay for playerbar control tooltips

src/components/player/PlayerBar.tsx

@@ -463,7 +463,7 @@ const PlayerBar = () => {
           >
             <PlayerColumn center height="45px">
               {/* Seek Backward Button */}
-              <CustomTooltip text="Seek backward">
+              <CustomTooltip text="Seek backward" delay={1000}>
                 <PlayerControlIcon
                   tabIndex={0}
                   icon="backward"
@@ -478,7 +478,7 @@ const PlayerBar = () => {
                 />
               </CustomTooltip>
               {/* Previous Song Button */}
-              <CustomTooltip text="Previous track">
+              <CustomTooltip text="Previous track" delay={1000}>
                 <PlayerControlIcon
                   tabIndex={0}
                   icon="step-backward"
@@ -493,7 +493,7 @@ const PlayerBar = () => {
                 />
               </CustomTooltip>
               {/* Play/Pause Button */}
-              <CustomTooltip text="Play/Pause">
+              <CustomTooltip text="Play/Pause" delay={1000}>
                 <PlayerControlIcon
                   tabIndex={0}
                   icon={
@@ -509,7 +509,7 @@ const PlayerBar = () => {
                 />
               </CustomTooltip>
               {/* Next Song Button */}
-              <CustomTooltip text="Next track">
+              <CustomTooltip text="Next track" delay={1000}>
                 <PlayerControlIcon
                   tabIndex={0}
                   icon="step-forward"
@@ -524,7 +524,7 @@ const PlayerBar = () => {
                 />
               </CustomTooltip>
               {/* Seek Forward Button */}
-              <CustomTooltip text="Seek forward">
+              <CustomTooltip text="Seek forward" delay={1000}>
                 <PlayerControlIcon
                   tabIndex={0}
                   icon="forward"

src/components/shared/CustomTooltip.tsx

@@ -1,7 +1,15 @@
 import React from 'react';
 import { Tooltip, Whisper } from 'rsuite';
+import styled from 'styled-components';
 
-export const tooltip = (text: string) => <Tooltip>{text}</Tooltip>;
+const StyledTooltip = styled(Tooltip)`
+  .rs-tooltip-inner {
+    background-color: #000000;
+    color: #ffffff;
+  }
+`;
+
+export const tooltip = (text: string) => <StyledTooltip>{text}</StyledTooltip>;
 
 const CustomTooltip = ({ children, text, delay, ...rest }: any) => {
   return (

src/styles/custom-theme.less

@@ -52,3 +52,7 @@
 @panel-heading-color: undefined;
 
 @button-ripple: false;
+
+// Tooltip
+@tooltip-bg: transparent;
+@tooltip-color: transparent;