Tooltip display and overlap Issue with ix-dropdown component

[pavan6014]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

Requirement:
Hover of dropdown items to display different status messages dynamically based on index value.
that is the reason we have used ix-tooltip inside dropdown component.

Description:
There is an issue with the ix-dropdown component where the tooltip is displaying inside the dropdown instead of outside.

Additionally, there is a scrolling issue to the drop down if tooltip content is more and have overlap issues.

Actual Behavior:

1. The tooltip is displaying inside the dropdown.
2. There is a scrolling issue where items or tooltips are cut off.

Expected Behavior
The tooltip should display outside the dropdown.
The dropdown should handle scrolling properly without cutting off items or tooltips.

Screenshot:

What type of frontend framework are you seeing the problem on?

Angular

Which version of iX do you use?

V2.5.0

Code to produce this issue.

https://stackblitz.com/edit/x35y4ich?file=src%2Fdropdown-icon.ts,src%2Fapp%2Fapp.component.html
 
**HTML code snippet:**
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <ix-button id="iconTriggerId">Open</ix-button>
    <ix-dropdown trigger="iconTriggerId">
      <ng-container *ngFor="let status of statusList; let i = index">
        <ix-dropdown-item [id]="'statusTooltip' + i">
          {{ status.value }}
        </ix-dropdown-item>
        <ix-tooltip for="[id='{{ 'statusTooltip' + i }}']" placement="bottom">
          This state change is not valid 
        </ix-tooltip>
      </ng-container>
    </ix-dropdown>
  `,
})
export default class DropdownIcon {
  statusList: Array<{ value: string }> = [
    { value: 'Development' },
    { value: 'Unstable' },
    { value: 'Stable' },
    { value: 'Deprecated' },
  ];
}

[matthiashader]

Hello @pavan6014, thank you for sharing your insights!
We are actively analyzing the issue and working on a solution. In the meantime, here’s a example with a workaround:
https://stackblitz.com/edit/x35y4ich-twz988tw?file=src%2Fdropdown-icon.ts,src%2Fapp%2Fapp.module.ts

[github-actions]

🤖 Hello @pavan6014

Your issue will be analyzed and is part of our internal workflow.
To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-2214

[kathrinschalber]

Hi @pavan6014, many thanks for your issue.

Could you give a bit more information about what exactly is your use case, including the UX concept behind it? Maybe this will help us understand this requirement better.

Thanks for helping us build and improve iX for everyone 🤗

[pavan6014]

Hi @kathrinschalber,

Description:
There is an issue with the ix-dropdown component where the tooltip is displaying inside the dropdown instead of outside.
Additionally, there is a scrolling issue to the drop down if tooltip content is more and have overlap issues.

Actual Behavior:

1. The tooltip is displaying inside the dropdown.
2. There is a scrolling issue where items or tooltips are cut off.

Expected Behavior

1. The tooltip should display outside the dropdown.
2. The dropdown should handle scrolling properly without cutting off items or tooltips.

Example provided in below example>> Hover on drop down item
https://stackblitz.com/edit/x35y4ich?file=src%2Fdropdown-icon.ts,src%2Fapp%2Fapp.component.html

[kathrinschalber]

Hi @pavan6014! Could you quickly explain why this tooltip is needed from a UX perspective? Usually, we use tooltips only or elements on a base level. Thanks for clarifying!

[pavan6014]

This is the requirement for UX perspective.

[kathrinschalber]

Thank you for providing the UX concept. It gives us a better idea of what you want to achieve and why. 🤗

In general, please keep in mind that disabled elements are non-interactive (see the official W3C for more details on the topic), so a tooltip is not a recommended option. Additionally, disabled elements also cannot be focused, so a tooltip won't be accessible as well.

Here are some alternatives that might fit to your use case:

1. Hide the invalid options instead of disable them, and if needed, add a heading like "Available state changes" to state that unavailable options are not there
2. Place disabled elements in a separate section by moving them at the end of the list and add a separator, and add a headline with an explanation like "Currently unavailable state changes"
3. Add an explanation text at the end of the list explaining why some options are disabled
4. Add a help button outside the dropdown next to the chip, that shows the tooltip explaining that some options might not be available for some reasons

If there are any further questions, let us know - we are happy to help ❤️