How to make tabs labels hide/expand on hover

Panel
1 

import panel as pn

pn.extension()

css = """
/* Make the tab header smaller initially */
.bk-header .bk-tab {
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: max-width 0.3s ease;
}

/* Expand on hover */
.bk-header .bk-tab:hover {
    max-width: 300px;
}
"""

pn.Tabs(("AAAA" * 4, "a" * 10000), tabs_location="right", stylesheets=[css]).show()
1 Like