Feature suggestion: Show title on mouseover on overflowing nav items

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:

1. Add a title attribute to all nav items. This can easily be done by modifying the nav-item partial. However, this creates a lot of redundancy, especially on large doc projects with huge navs.
2. Add a title attribute 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

[squidfunk]

Insiders 4.15.0 was just released and comes with improved support for tooltips 🎉 This release also includes the behavior mentioned above, automatically adding a tooltip to overflowing navigation titles.

[squidfunk]

Thanks for suggesting! As a general note, I’m working on better hover behavior for elements with titles (including abbreviations specifically), and fixing this issue will be a part of it. It might take some time, but the logic is the same, so it wouldn’t make sense to solve this specifically.

In the mean time, the following script should mitigate the issue (adapted from your code example to remove jQuery):

document$.subscribe(() => {
  document.querySelectorAll(".md-ellipsis").forEach(el => {
    if (this.offsetWidth < this.scrollWidth) {
      el.setAttribute("title", el.innerText)
    }
  })
})

Note that will only work in Insiders, since it makes use of the refactoring of the navigation structure to support icons.