Make scrollable sidebar with tooltips using Tailwind CSS

Question

I have a sidebar made with Tailwind CSS and I'd like to make it scrollable. My problem is, that when you hover over an entry in the list, a small text label should be displayed next to the entry, outside of the sidebar (shown below).

When I use overflow-y-scroll it scrolls fine on the Y-axis, but instead of displaying the hover text next to the sidebar, it makes the sidebar scrollable on the X-axis and basically hides the text.

My Sidebar JSX:

    <aside className="fixed top-0 left-0 h-screen w-16 m-0 flex flex-col bg-red-800 text-white shadow-lg">
        <div className='overflow-y-scroll'>
            <SidebarIcon text="asdf" icon={0} />
            <SidebarIcon text="asdf" icon={1} />
            <SidebarIcon text="asdf" icon={2} />
            <SidebarIcon text="asdf" icon={0} />
            <SidebarIcon text="asdf" icon={1} />
            <SidebarIcon text="asdf" icon={2} />
            <SidebarIcon text="asdf" icon={0} />
            <SidebarIcon text="asdf" icon={1} />
            <SidebarIcon text="asdf" icon={2} />
            <SidebarIcon text="asdf" icon={0} />
            <SidebarIcon text="asdf" icon={1} />
            <SidebarIcon text="asdf" icon={2} />
            <SidebarIcon text="asdf" icon={0} />
            <SidebarIcon text="asdf" icon={1} />
            <SidebarIcon text="asdf" icon={2} />
            <SidebarIcon text="asdf" icon={0} />
            <SidebarIcon text="asdf" icon={1} />
            <SidebarIcon text="asdf" icon={2} />
            <SidebarIcon text="asdf" icon={0} />
            <SidebarIcon text="asdf" icon={1} />
            <SidebarIcon text="asdf" icon={2} />
            <SidebarIcon text="asdf" icon={0} />
            <SidebarIcon text="asdf" icon={1} />
            <SidebarIcon text="asdf" icon={2} />
            <SidebarIcon text="asdf" icon={0} />
            <SidebarIcon text="asdf" icon={1} />
            <SidebarIcon text="asdf" icon={2} />
        </div>
    </aside>

My SidebarIcon component:

    const SidebarIcon = function ({ icon, text}) {

        let icons = [
            <FontAwesomeIcon icon={solid('display')} className="w-[28px] h-[28px]" size='28'/>,         // Desktop  0
            <FontAwesomeIcon icon={solid('laptop')} className="w-[28px] h-[28px]" size='28'/>,          // Laptop   1
            <FontAwesomeIcon icon={solid('mobile-screen')} className="w-[28px] h-[28px]" size='28'/>    // Mobile   2
        ]
        
        return (
            <div className={`sidebar-icon group shrink-0`}>
                { icons[icon] }

                <span class='sidebar-tooltip group-hover:scale-100'> { text } </span>
            </div>
        )
    }

And at last the CSS for the icons:

    .sidebar-icon {
        @apply bg-red-900 text-gray-50;
        @apply relative flex items-center justify-center;
        @apply h-12 w-12 mx-auto my-2;
        @apply shadow-lg rounded-lg;
        @apply transition-all duration-150 ease-linear;
        @apply hover:bg-gray-800 hover:text-red-800;
    }

    .sidebar-tooltip{
      @apply absolute w-auto p-2 m-2 min-w-max left-14;
      @apply rounded-md shadow-md;
      @apply text-white bg-gray-900;
      @apply text-xs font-bold;
      @apply transition-all duration-100 scale-0 origin-left
    }

Have you tried setting a width on your wrapper `div`? For example: `
`. — Ed Lucas, Jul 02 '22 at 20:34
Sadly yes, and I also tried adding the `overflow-y-scroll` class to the `
` Tag with the same result :/ — isi_ko, Jul 02 '22 at 21:18
I'm sure this is problem with absolute stuff, can i see the `sidebar-tooltip` css? — Ahmad Shiddiq, Jul 03 '22 at 09:24
This is a CSS problem with `overflow` and not specific to Tailwind. See: https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue — Ed Lucas, Jul 04 '22 at 00:41

score 0 · Answer 1 · answered Jul 04 '22 at 06:28

This is happening because you are applying the scroll property to the entire list of SidebarIcon component.

And in the SidebarIcon on hover you are scalling up the icon. Basically you are hiding it and then making it visible when hovered.

Because of which even the tooltip is inside the scroll. Which is leading to this undefined behavior.

To overcome this, I prefer you use Flowbite as it is preferred in the tailwindcss's official documentation.

And follow the below links for the installation and setup of Tailwind CSS Tooltip - Flowbite

Hope it helps !

Great Idea, I'll probably use flowbite in the future, sadly their Tooltip has the same effect as my tooltip :/ — isi_ko, Jul 05 '22 at 03:32

Make scrollable sidebar with tooltips using Tailwind CSS

1 Answers1