diff --git a/ui/src/album/AlbumGridView.jsx b/ui/src/album/AlbumGridView.jsx
index 58732bbd..b7db3973 100644
--- a/ui/src/album/AlbumGridView.jsx
+++ b/ui/src/album/AlbumGridView.jsx
@@ -13,7 +13,12 @@ import { linkToRecord, useListContext, Loading } from 'react-admin'
 import { withContentRect } from 'react-measure'
 import { useDrag } from 'react-dnd'
 import subsonic from '../subsonic'
-import { AlbumContextMenu, PlayButton, ArtistLinkField } from '../common'
+import {
+  AlbumContextMenu,
+  PlayButton,
+  ArtistLinkField,
+  OverflowTooltip,
+} from '../common'
 import { DraggableTypes } from '../consts'
 import clsx from 'clsx'
 import { AlbumDatesField } from './AlbumDatesField.jsx'
@@ -198,7 +203,9 @@ const AlbumGridTile = ({ showArtist, record, basePath, ...props }) => {
         to={linkToRecord(basePath, record.id, 'show')}
       >
         <span>
-          <Typography className={classes.albumName}>{record.name}</Typography>
+          <OverflowTooltip title={record.name}>
+            <Typography className={classes.albumName}>{record.name}</Typography>
+          </OverflowTooltip>
           {record.tags && record.tags['albumversion'] && (
             <Typography className={classes.albumVersion}>
               {record.tags['albumversion']}
diff --git a/ui/src/common/OverflowTooltip.jsx b/ui/src/common/OverflowTooltip.jsx
new file mode 100644
index 00000000..c000bd9f
--- /dev/null
+++ b/ui/src/common/OverflowTooltip.jsx
@@ -0,0 +1,90 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Tooltip } from '@material-ui/core'
+import { makeStyles, alpha } from '@material-ui/core/styles'
+import grey from '@material-ui/core/colors/grey'
+
+const useStyles = makeStyles(
+  (theme) => ({
+    tooltip: {
+      backgroundColor:
+        theme.palette.type === 'dark'
+          ? alpha(grey[700], 0.92)
+          : alpha(grey[300], 0.92),
+      color:
+        theme.palette.type === 'dark'
+          ? theme.palette.common.white
+          : theme.palette.common.black,
+      borderRadius: theme.shape.borderRadius,
+      ...theme.typography.body2,
+      padding: theme.spacing(0.5, 1),
+      maxWidth: 300,
+    },
+  }),
+  { name: 'NDOverflowTooltip' },
+)
+
+const transitionProps = { timeout: 0 }
+
+export const OverflowTooltip = ({
+  children,
+  title,
+  placement = 'bottom-start',
+}) => {
+  const classes = useStyles()
+  const textRef = React.useRef(null)
+  const [isOverflowing, setIsOverflowing] = React.useState(false)
+  const tooltipClasses = React.useMemo(
+    () => ({ tooltip: classes.tooltip }),
+    [classes.tooltip],
+  )
+
+  React.useLayoutEffect(() => {
+    const el = textRef.current
+    if (!el) return
+
+    const checkOverflow = () => {
+      setIsOverflowing(el.scrollWidth > el.clientWidth)
+    }
+
+    const resizeObserver = new ResizeObserver(checkOverflow)
+    resizeObserver.observe(el)
+
+    checkOverflow()
+
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  const mergedRef = React.useCallback(
+    (el) => {
+      textRef.current = el
+
+      const { ref } = children
+      if (typeof ref === 'function') {
+        ref(el)
+      } else if (ref && typeof ref === 'object') {
+        ref.current = el
+      }
+    },
+    [children],
+  )
+
+  return (
+    <Tooltip
+      title={title}
+      disableHoverListener={!isOverflowing}
+      disableTouchListener
+      placement={placement}
+      TransitionProps={transitionProps}
+      classes={tooltipClasses}
+    >
+      {React.cloneElement(children, { ref: mergedRef })}
+    </Tooltip>
+  )
+}
+
+OverflowTooltip.propTypes = {
+  children: PropTypes.element.isRequired,
+  title: PropTypes.string.isRequired,
+  placement: PropTypes.string,
+}
diff --git a/ui/src/common/index.js b/ui/src/common/index.js
index 35622568..a8dc354c 100644
--- a/ui/src/common/index.js
+++ b/ui/src/common/index.js
@@ -41,4 +41,5 @@ export * from './formatRange.js'
 export * from './playlistUtils.js'
 export * from './PathField.jsx'
 export * from './ParticipantsInfo'
+export * from './OverflowTooltip'
 export * from './useSearchRefocus'
diff --git a/ui/src/layout/PlaylistsSubMenu.jsx b/ui/src/layout/PlaylistsSubMenu.jsx
index a9f70b87..b94bebf8 100644
--- a/ui/src/layout/PlaylistsSubMenu.jsx
+++ b/ui/src/layout/PlaylistsSubMenu.jsx
@@ -12,7 +12,7 @@ import QueueMusicOutlinedIcon from '@material-ui/icons/QueueMusicOutlined'
 import { BiCog } from 'react-icons/bi'
 import { useDrop } from 'react-dnd'
 import SubMenu from './SubMenu'
-import { canChangeTracks } from '../common'
+import { canChangeTracks, OverflowTooltip } from '../common'
 import { DraggableTypes } from '../consts'
 import config from '../config'
 
@@ -39,9 +39,11 @@ const PlaylistMenuItemLink = ({ pls, sidebarIsOpen }) => {
     <MenuItemLink
       to={`/playlist/${pls.id}/show`}
       primaryText={
-        <Typography variant="inherit" noWrap ref={dropRef}>
-          {pls.name}
-        </Typography>
+        <OverflowTooltip title={pls.name} placement="right">
+          <Typography variant="inherit" noWrap ref={dropRef}>
+            {pls.name}
+          </Typography>
+        </OverflowTooltip>
       }
       sidebarIsOpen={sidebarIsOpen}
       dense={false}
diff --git a/ui/src/playlist/PlaylistDetails.jsx b/ui/src/playlist/PlaylistDetails.jsx
index eefed83b..aeddf0d4 100644
--- a/ui/src/playlist/PlaylistDetails.jsx
+++ b/ui/src/playlist/PlaylistDetails.jsx
@@ -19,6 +19,7 @@ import {
   DurationField,
   SizeField,
   isWritable,
+  OverflowTooltip,
 } from '../common'
 import config from '../config'
 import subsonic from '../subsonic'
@@ -274,12 +275,14 @@ const PlaylistDetails = (props) => {
         </div>
         <div className={classes.details}>
           <CardContent className={classes.content}>
-            <Typography
-              variant={isDesktop ? 'h5' : 'h6'}
-              className={classes.title}
-            >
-              {record.name || translate('ra.page.loading')}
-            </Typography>
+            <OverflowTooltip title={record.name || ''}>
+              <Typography
+                variant={isDesktop ? 'h5' : 'h6'}
+                className={classes.title}
+              >
+                {record.name || translate('ra.page.loading')}
+              </Typography>
+            </OverflowTooltip>
             <Typography component="p" className={classes.stats}>
               {record.songCount ? (
                 <span>