'active' attribute behavior isn't predictable

[daraul]

I'm trying to display my tooltips programatically. Preferably on page load, I'd want relavant tooltips to display themselves for 5 seconds.

I did something like this:

show_tooltips: Boolean = false;

IonPageDidLoad = () => {
    console.log("Page loaded");

    this.show_tooltips = true;

    setTimeout(() => {
        console.log("Hiding tooltips");

        this.show_tooltips = false;
    }, 5000);
}

In the DOM I set the active my attribute on my button like this: active="{{ show_tooltips }}".

When the page loads for a split second I can see the tooltips (maybe when the show_tooltips variable is created and then set to false), but once the IonPageDidLoad function runs and sets show_tooltips to true, nothing happens. Then 5 seconds later when show_tooltips is set to false, the tooltips display.

I expected this to be the other way around. I went ahead and switched the assignments around, thinking maybe the documentation was just incorrect, but nothing happened this time around either. I tried doing this, before setting the timeout:

    this.show_tooltips = false;
    this.show_tooltips = true;

to see if maybe they need to be 'hidden' before being 'revealed', but that didn't work either. Can you give me some clarity? Am I doing something wrong? Is this behavior expected? I was really hoping to use this in a tutorial inside my application, but being unable to programatically show and hide the tooltips is a dealbreaker for me.

[daraul]

I just realized that if I do [active]='' instead of active='', the tooltips show or hide predictably. I'm not entirely sure why this is.

[jj-julia]

@daraul I am having the same issues as you describe, could you possibly include a little more of both your html and ts code, so i can see how you solved it? I did [active]=''showTooltips" and that is why I ask :)

[daraul]

In my component file I have something like this:

showTooltips: Boolean = false;

Then on whatever element should display the tooltip (an input for example) I have this:

<input type="text" tooltip="test" [active]="showTooltips" />

Then I can do something in my _construct function to show the tooltips after a timeout (for some reason displaying them immediately doesn't work):

setTimeout(() => {
    this.showTooltips = true; // the tooltips should now display until you set this back to false
}, 5000)

That should get you to display the tooltips on command, @jj-julia. Note that I wrote this off the top of my head so there might be syntax errors here and there, but you should get the gist of it.

[willyboy]

I think #32 fixes the issue you're having.

[jrquick17]

I have fixed this in an updated version of this project. This issue was specifically fixed along with an example added to the demo in this commit.