06

The tooltip is fully functional now, but its display is a little hard to notice. You can address this by adding some animation for the show and hide states. There are many ways to animate elements, but in this case a css transition should suffice.

One easy way to style element states like "showing" is to add an attribute which corresponds to the state. To do this, add a showing property that reflects to the attribute when set:

{% switchable-sample %}

@property({reflect: true, type: Boolean})
showing = false;

static properties = {
  offset: {type: Number},
  showing: {reflect: true, type: Boolean},
};
constructor() {
  super();
  this.offset = 4;
  this.showing = false;
}

{% endswitchable-sample %}

Now add css for the transition animation. Set the opacity and scale of the element when its showing. This will transition over the specified duration. Feel free to experiment with other properties that can transition.

:host {
  /* ... */
  opacity: 0;
  transform: scale(0.75);
  transition: opacity, transform;
  transition-duration:  0.33s;
}

:host([showing]) {
  opacity: 1;
  transform: scale(1);
}

Now, inside the show method, set showing:

show = () => {
  // ...
  this.showing = true;
};

In the hide method, remove the code setting display to none since that will now be done at the end of the transition. Just set showing to false here to trigger the transition. Then add a finishHide method which sets the display to none when the transition completes and showing is false.

hide = () => {
  this.showing = false;
};

finishHide = () => {
  if (!this.showing) {
    this.style.display = 'none';
  }
};

The browser sends a transitionEnd event when a transition is done. Hook that up to finish hiding the tooltip. This is one time work you can do in the element constructor. Near the top of the class definition, add:

{% switchable-sample %}

constructor() {
  super();
  // Finish hiding at end of animation
  this.addEventListener('transitionend', this.finishHide);
}

constructor() {
  super();
  // Finish hiding at end of animation
  this.addEventListener('transitionend', this.finishHide);
  this.offset = 4;
  this.showing = false;
}

{% endswitchable-sample %}

Now move your pointer over the tooltip targets. You should see the tooltips transitioning as they are shown and hidden.