Tengo una navegación lateral con los siguientes estilos.

 position: fixed; left: 0; top: 0; height: 100%; width: 78px; background: #11101D; padding: 6px 14px; z-index: 99; transition: all 0.5s ease; overflow-x: visible; overflow-y: scroll;

Lo que permite al usuario desplazarse verticalmente en la navegación lateral.

Cuando un usuario se desplaza sobre un elemento de navegación, aparece una información sobre herramientas a la derecha.

 position: absolute; top: -20px; left: calc(100% + 15px); z-index: 3; background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); padding: 6px 12px; border-radius: 4px; font-size: 15px; font-weight: 400; opacity: 0; white-space: nowrap; pointer-events: none; transition: 0s;

Sin embargo, debido al overflow-y: scroll; en el elemento principal, no se superpone a la barra lateral, sino que se desplaza horizontalmente para verlo, lo que no se desea.

Información sobre herramientas actual

Información sobre herramientas deseada (con funcionalidad de desplazamiento de navegación lateral)

Tengo un JSFiddle con todas las marcas y estilos.

Quiero que la navegación lateral se pueda desplazar verticalmente sin dejar de tener la funcionalidad para ver la información sobre herramientas.

Cualquier ayuda sería muy apreciada. Esto se basa en una aplicación React, por lo que preferiría soluciones que no sean JQuery.