A common use for a tooltip is adding it to a ⓘ icon in order to display "more info". I'm currently working on making my components more accesible, so I wanted to add the "tooltip" role to my tooltip component. But surprisingly the Mozilla webpage for WAI-ARIA explicitly says here:
The tooltip is not the appropriate role for the more information "i" icon, ⓘ. A tooltip is directly associated with the owning element. The ⓘ isn't 'described by' detailed information; the tool or control is.
Although the official docs doesn't say anything about it.
Then, what role can my tooltip component have if I use it exactly for that purpose? Or am I misinterpreting that statement?
This is my tooltip component template with the role as I expected to add it:
<div role="tooltip" id="tooltip" class="tooltip-container">
<div class="inner">{{ content }}</div>
<span class="caret"></span>
</div>
The MDN snippet you posted is correct, in the sense that it is not the icon that should get the tooltip role. The icon is just a button.
If the content in the tip can be expressed as 'flat text' (i.e. without structures like headings or lists) you can associate your component with it using aria-describedby, as mentioned in the w3c docs.
If the tip content does have structure, use aria-details instead. This is acceptable.
Either of these will associate the tip content with the component, and thus comply with "Info and Relationships".