Build-in tooltip in elements instead of having "<wa-tooltip>"?

[HovKlan-DH]

I am wondering if it would be possible to have tooltips available directly in elements, so it would not be needed to use <wa-tooltip>?

I mean, I do have this code here:

<wa-switch id="toggle-button">Switch with tooltop</wa-switch>
<wa-tooltip for="toggle-button" placement="right-end">Tooltip for switch</wa-tooltip>

This works fine, but how about having this instead?

<wa-switch data-tooltip="Tooltip for switch" data-tooltip-placement="right-end">Switch with tooltop</wa-switch>

That would make it a little easier, with no need for any ID and reduce the amount of DOM elements.

Not sure if this can cover all scenarios that <wa-tooltip> can do (probably not), but maybe just to support the basics, and then <wa-tooltip> can be used for the advanced stuff?

[LeaVerou]

I have wondered about this too, though it's hard to do in a way that would not introduce a dependency on <wa-tooltip> for every single component (and even then it wouldn't work on regular elements).

Perhaps the solution is to ship some JS alongside Web Awesome that reads a certain global attribute (e.g. data-wa-tooltip) and creates the necessary tooltips. Would something like that work for you?

[HovKlan-DH]

Perhaps the solution is to ship some JS alongside Web Awesome that reads a certain global attribute (e.g. data-wa-tooltip) and creates the necessary tooltips. Would something like that work for you?

If this "ship some JS alongside Web Awesome" could be part of the standard webawesome.loader.js then this would be perfect I would expect? I don't see a need for additional JS files ... or ?

[LeaVerou]

Yup, if we go that route (that's a big if!) it would all be part of the same JS file.