Feature suggestion: Show title on mouseover on overflowing nav items #3785
Description
Contribution guidelines
- I've read the contribution guidelines and wholeheartedly agree
I want to suggest an idea and checked that ...
- ... to my best knowledge, my idea wouldn't break something for other users
- ... the documentation does not mention anything about my idea
- ... there are no open or closed issues that are related to my idea
Description
If a nav item has a very long title, the title is truncated with ellipsis, which is good to prevent the nav from scrolling horizontally. (This may be Insiders only, not sure.)
However, it would be nice if users could see the full title on mouseover, like this:
Basically, I can see two solutions for this:
- Add a
titleattribute to all nav items. This can easily be done by modifying thenav-itempartial. However, this creates a lot of redundancy, especially on large doc projects with huge navs. - Add a
titleattribute to overflowing nav items only. This can be done using JS. See code below. (Yes, it's jQuery! Heresy! But to get an idea.)
// Add title to overflowing nav links
$(".md-ellipsis").each(function () {
if (this.offsetWidth < this.scrollWidth) {
$(this).attr("title", $(this).text().trim());
}
});Use Cases
See description.
Screenshots / Mockups
No response