Tooltip display and overlap Issue with ix-dropdown component

[pavan6014]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] 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' },
  ];
}