Add a tooltip to sidebar list item

[shipswake]

I am generating docs automatically using @graphql-markdown
When the sidebar content is generated some of the labels are quite long
The sidebar is setting the width to fit-content which results in the sidebar width changing as groups are expanded

I would like to:
fix the sidebar width
truncate the label in the sidebar
display a tooltip on hover with the complete label

Is this possible?

[slorber]

The sidebar is setting the width to fit-content which results in the sidebar width changing as groups are expanded

That's not what I see on our own website. Do you have custom CSS?

Can you please provide a runnable repro of your problem using Docusaurus.new ? We need to be able to see your code and run it under the latest version to help.

[shipswake]

yes, it is custom css

[slorber]

If you use custom CSS, we can't really do anything for you in that case.

What we can do instead is to improve our default theme to automatically truncate long sidebar labels and add a title prop.

You can open a bug report so that we don't forget to handle it.

But keep in mind that as soon as you use custom CSS, you diverge from our code and are responsible for restoring the features you eventually break with it.

[shipswake]

Yes, I realize the custom CSS takes it out of your hands
When I remove the custom CSS that is where the labels cannot be seen fully

This will work

What we can do instead is to improve our default theme to automatically truncate long sidebar labels and add a title prop.

[shipswake]

I added an issue here: #10531

[shipswake]

I know it is a big ask. Any idea on the timeline for a fix?

[slorber]

Unfortunately, I am busy on more important things and don't plan to work on this myself soon. If you submit a PR with a fix, it will be fixed faster. EVentually someone from the community would randomly submit a PR.