Feature suggestion: Show title on mouseover on overflowing nav items

[wilhelmer]

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]

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.

[wilhelmer]

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

Off-topic, but .. 😮 you can use icons in the nav? Is that documented somewhere? Couldn't find it.

[squidfunk]

@wilhelmer jup, they're called page icons, since they are set per page. If you click the link and look to the left, you'll see the navigation making use of it 😊 This was added in insiders-4.5.0.

[wilhelmer]

This is awesome. Please consider linking to it from the "Icons, Emojis" page. It's not prominent enough in search, probably because it's a h3 section.

[squidfunk]

Makes sense, we could add it under the usage guide.

[wilhelmer]

One last thing – your code sample isn't working, must be el instead of this: el.offsetWidth < el.scrollWidth.

[wilhelmer]

Also, it won't work if the nav is collapsed at page load, because offsetWidth and scollWidth of all collapsed entries is 0 then.

It's a little trickier than I thought ...

[squidfunk]

Here's a video of the new ellipsis behavior that is landing next week in Insiders:

Ohne.Titel.mp4

All elements that have ellipsis will now show a small tooltip when they overflow. The video shows that this is also the case for the header title that wraps on scroll. Additionally, content elements that have a title attribute can be opted into this new behavior as well by enabling the new content.tooltips flag:

This replaces the ugly native tooltips that are not very user friendly:

[squidfunk]

Addendum: of course, it will also apply to the table of contents:

[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.