Tooltip not shown in ion-item

[mediengestadler]

Hi,

if you use tooltip laptop in an ion-item it will be not displayed, because the wrapper is overflow: hidden and the tip is inserted after the element.

It would be better, if the tooltip is inserted at the end of the page

[Baidaly]

I just copied the code into my project and adjusted the following to insert the component at the end of the page:

export class TooltipDirective implements OnInit, AfterViewInit, OnDestroy {
    // The rest of the code
    constructor(
        private el: ElementRef,
        private appRef: ApplicationRef,
        private platform: Platform,
        private cfr: ComponentFactoryResolver,
        private tooltipCtrl: TooltipController,
        private injector: Injector,
        @Inject(DOCUMENT) private document: Document
    ) {}

    private _createTooltipComponent() {
        const componentFactory = this.cfr.resolveComponentFactory(TooltipBox);
        this._tooltipElement = componentFactory.create(this.injector);

        // Append the tooltip component to the body of the page
        this.document.body.appendChild(
            this._tooltipElement.location.nativeElement
        );

        this.appRef.attachView(this._tooltipElement.hostView);
        this.tooltipCtrl.addTooltip(this);
    }

    // The rest of the code
}

Here is the sample structure: