Insert tooltip in left sidebar component

[mstolf]

How to use GitHub

• Please use the 👍 reaction to show that you are interested into the same feature.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

---

Is your feature request related to a problem? Please describe.
Currently, when a user has a very long name, the name of the user is partially cut to fit inside the component, so it is not possible to read the full name of the user.

Describe the solution you'd like
Include tooltip in left sidebar when hovering over username

Additional context
Add any other context or screenshots about the feature request here.

[ghost]

I tried implementing this but I ran into an issue where the tooltip would extend off the screen.

Here's a branch that adds a titleTooltip prop to the ListItem component, in case anyone finds it useful: nextcloud-libraries/nextcloud-vue@master...carlcsaposs:title-tooltip.

I saw an issue (Akryum/floating-vue#175) about the tooltip having a fixed width. I was unsuccessful in trying to change the width of the tooltip using the selector in the linked issue. I tried ::v-deep in src/components/LeftSidebar/ConversationsList/Conversation.vue but I'm not sure if that was the right place.

I also tried changing the placement of the tooltip but that didn't prevent the tooltip from getting cut off.

[nickvergessen]

@marcoambrosini can you try to assist?

[marcoambrosini]

@carlcsaposs it seems that the boundaries element for the tooltip is not defined. Could you try and pass in an options object like in the example below adding a boundaryElement key to the object?

[ghost]

@marcoambrosini Thank you! I was able to prevent the tooltip from extending off the screen with a few different options key-value pairs.

Are any of these pairs acceptable?

1. boundariesElement set to #content-vue
   
2. container set to false (uses parent html node)
   
3. container set to #app-navigation-vue--notice padding
   

Setting boundariesElement to #app-navigation-vue did not prevent the tooltip from extending off the screen.

---

Also, I'm noticing that, when "un-hovering", the tooltip disappears slightly after the ListItem actions, which causes the tooltip to shift to the right slightly for a moment.

I noticed that the tooltip directive has been modified to have a hide delay and I was wondering if this tooltip should have that same delay & shift to the right slightly for that delay.

If not, I tried setting the delay to 0 but the shift was still present, just much shorter.

Before setting the delay to 0, my initial thought was to bind the hovered status of ListItem to the show option of the v-tooltip directive, but then I realized I didn't know how I'd also be able to specify the boundariesElement option from Conversation.vue. I tried using the Popover component instead of the v-tooltip directive but I noticed the style didn't match and stopped there.

[marcoambrosini]

I'd say option 1 with placement "auto" is a good way to go. Have you tried setting the hide delay to 0?

[ghost]

I'd say option 1 with placement "auto" is a good way to go. Have you tried setting the hide delay to 0?

Sounds good; I'll PR that. Regarding the delay, yes:

I tried setting the delay to 0 but the shift was still present, just much shorter.

[marcoambrosini]

What about setting the whole li element as parent element?

[ghost]

What about setting the whole li element as parent element?

As in, apply the tooltip to the li element? If so, here's what it looks like:

It prevents the shifting issue, but I think it might mess up the accessibility tags (i.e. aria-describedby).

[marcoambrosini]

hmmm.. @juliushaertl or @skjnldsv do you have any suggestions here?

[nickvergessen]

From my POV this should be fixed in the Vue lib, otherwise every consumer of the lib has to manually do this?

[nickvergessen]

@Antreesy you fixed this lately, right?

[Antreesy]

@Antreesy you fixed this lately, right?

We have a solution now with implementing a native title manually, but that's more a patch rather then a solution:

• Fix tooltip appearance for long names in ConversationList #8605

Roughly speaking, issue can be closed. Last discussion was here:

• Implement slot for title in ListItem nextcloud-libraries/nextcloud-vue#3715