Putting HTML directly in `component` property of a modal/popover

Ionic Framework
1

When creating a popover (/modal/etc.), I’d like to do something like:

const popover = await this.popoverCtrl.create({
      component: `<ion-item lines="none" detail="false" button (click)="dismissPopover()">
      This is a tooltip
    </ion-item>`,
      showBackdrop: false
});

which doesn’t work.

Is there a way to do it without creating a page?

Defining a custom element raises an error “this name has already been used with this regsitry”, whatever the element name.

I’ve checked the doc about the component property, which doesn’t tell me much on what input type it can accept:
Function | HTMLElement | null | string

What a Function could be?

2

I would think a function that returns a component. I don’t believe your overall goal is supported - I think you must make a component to be a modal.

1 Like
3

OK, seems what I thought.

It’s rather a pity, in the sense that using the title attribute on a span surrounding a ion-button makes the tooltip very long to appear – it’s much faster with a Popover component instantiated on the mouseover event.

(Adding title directly to a <ion-button> is quite buggy, as the tooltip takes time to appear and also does not on the whole button…)

4

I’ve never used it, and don’t know how compatible it is with current versions of things, but you could look into using something like zyra/ionic-tooltips.

5

I’ve seen this repo, but latest commit 15 months ago, doesn’t sound great.