Possibility to wrap tooltip around trigger to not have to use for=""

[patrickvuarnoz]

Every time I need to do a tooltip with Web Awesome I stumble over the necessity to use IDs for the elements that trigger the tooltips. This is a bit cumbersome as you need to make sure that the ID is unique in the whole HTML document. I remember a technique that Bootstrap used to avoid having id="" and for="" for their radio buttons. They simply wrapped the radio button inside the label:

<label>
  <input type="radio"> Some label
</label>

Would something similar be possible with Web Awesome for the tooltips, perhaps solving it via a trigger slot?

<wa-tooltip>
  This is a tooltip
  <wa-icon name="heart" slot="trigger"></wa-icon>
</wa-tooltip>

I would probably want to keep the current option with id="" and for="" because it gives the developer full flexibility, but some kind of a shorthand would be nice where IDs were not necessary. Maybe you have other/better ideas for that.

[LeaVerou]

Hi @patrickvuarnoz! I cannot promise anything yet, but it is something we are discussing internally. 😊