Add tooltips to card overlay buttons

- Add to queue
- Favorite
- View in modal

src/components/card/Card.tsx

@@ -148,29 +148,40 @@ const Card = ({
                 icon={<Icon icon="play" />}
                 onClick={handlePlayClick}
               />
-              <AppendOverlayButton
+
-                onClick={() => handlePlayAppend('later')}
+              <CustomTooltip text="Add to queue (later)">
-                size={size <= 160 ? 'xs' : 'sm'}
+                <AppendOverlayButton
-                icon={<Icon icon="plus" />}
+                  onClick={() => handlePlayAppend('later')}
-              />
-              <AppendNextOverlayButton
-                onClick={() => handlePlayAppend('next')}
-                size={size <= 160 ? 'xs' : 'sm'}
-                icon={<Icon icon="plus-circle" />}
-              />
-              {playClick.type !== 'playlist' && (
-                <FavoriteOverlayButton
-                  onClick={() => handleFavorite(rest.details)}
                   size={size <= 160 ? 'xs' : 'sm'}
-                  icon={<Icon icon={rest.details.starred ? 'heart' : 'heart-o'} />}
+                  icon={<Icon icon="plus" />}
                 />
-              )}
+              </CustomTooltip>
-              {!rest.isModal && (
+
-                <ModalViewOverlayButton
+              <CustomTooltip text="Add to queue (next)">
+                <AppendNextOverlayButton
+                  onClick={() => handlePlayAppend('next')}
                   size={size <= 160 ? 'xs' : 'sm'}
-                  icon={<Icon icon="external-link" />}
+                  icon={<Icon icon="plus-circle" />}
-                  onClick={handleOpenModal}
                 />
+              </CustomTooltip>
+
+              {playClick.type !== 'playlist' && (
+                <CustomTooltip text="Toggle favorite">
+                  <FavoriteOverlayButton
+                    onClick={() => handleFavorite(rest.details)}
+                    size={size <= 160 ? 'xs' : 'sm'}
+                    icon={<Icon icon={rest.details.starred ? 'heart' : 'heart-o'} />}
+                  />
+                </CustomTooltip>
+              )}
+              {!rest.isModal && (
+                <CustomTooltip text="View in modal">
+                  <ModalViewOverlayButton
+                    size={size <= 160 ? 'xs' : 'sm'}
+                    icon={<Icon icon="external-link" />}
+                    onClick={handleOpenModal}
+                  />
+                </CustomTooltip>
               )}
             </>
           )}