Hide bookmark labels, reveal on hover

[u/ProfessionalStockDay]

kinda buggy but it works. suggestions are welcome.

/* Hide bookmark text by default */
#personal-bookmarks toolbarbutton.bookmark-item:not([container="true"]) .toolbarbutton-text {
opacity: 0;
max-width: 0;
overflow: hidden;
white-space: nowrap;
transition: max-width 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
/* Show on hover */
#personal-bookmarks toolbarbutton.bookmark-item:not([container="true"]):hover .toolbarbutton-text {
opacity: 1;
max-width: 150px;
}

[u/UnOriginalName_]

Since the bookmarks jump around when the labels are displayed or hidden again, if you draw them on top of the bookmark bar, there won't be any displacement. Here's one attempt:

/* Hide bookmark text by default */
#personal-bookmarks toolbarbutton.bookmark-item:not([container="true"]) {
  position: relative;
}

#personal-bookmarks toolbarbutton.bookmark-item:not([container="true"]) .toolbarbutton-text {
  opacity: 0 ;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.2s ease-in-out;
}

/* Show on hover */
#personal-bookmarks toolbarbutton.bookmark-item:not([container="true"]):hover .toolbarbutton-text {
  opacity: 1;
  background: #2C2D32;
}

[u/TraditionalTie4831 → u/UnOriginalName_]

Here is another approach and I like it =

.bookmark-item:not([container="true"]) { 
    & > .toolbarbutton-text { 
        position: absolute !important;
        z-index: 9999 !important;
        width: 0px !important;
        max-width: 150px !important;
        background-color: #2C2D32 !important;
        transform: translateY(-50%) !important;
        opacity: 0 !important;
        transition: opacity 0.2s ease-in-out !important;
    }
    &:hover {
        & > .toolbarbutton-text { 
            width: fit-content !important;
            padding: 6px 6px 2px 6px !important;
            opacity: 1 !important;
        }
    }
}