Delay problems with dynamicTitle

[itayganor]

I noticed that when using both delay and dynamicTitle, there are problems with the browser-generated title.
As you can see in this demo (follow the instructions), I use both settings. When I change the title using $(this).attr('title', 'foo');, and then hover the button again, you can see that the broswer title is shown before Tippy removes it and uses its value.

Example in GIF:

I was thinking about reasons for this problem and I came up with ideas how to solve it:

1. The delay setting affect when onShow fires: As far as I know, the title is removed only when the tippy tooltip is being rendered. delay adds the delay to the render and not to the presentation itself, which means that in this time, the browser have a few miliseconds to generate its own title.
2. Different attribute: Let the user decide what attribute will be the tooltip content, other than the default attribute which is title. The user may use data-title or aria-label, attributes that the browser does not use for any purpose.

[atomiks]

On macOS it also behaves differently: Once I click the button and keep the cursor over the button, the browser will show the new tooltip without needing to even do the steps you listed in the link.

The reason title is used is because it's semantic and allows JS-disabled / old browsers to still show a basic tooltip for maximum compatibility. But I guess a new attribute could be used for this situation?

The only other solution I can think of is to use a mutation observer to detect when the title attribute has been changed and then update the tooltip content automatically, not inside the show() method when either the event listener invokes it or it's done programmatically.

---

Edit: After doing some testing this does seem to be a much better method

[itayganor]

@atomiks is it possible to have a fix release for this problem?

[atomiks]

Yep soon

[atomiks]

1.3.0