As a disclaimer, tooltips are bad for accessibility.
Their use is usually a poor choice.
Nonetheless they may help to condense complex GUIs, in SPAs, etc.
Two versions are shown, to avoid using javascript,
or generic div tooltips, etc.
Both usable in conjunction and sharing a uniform style.
data-tip='', with
nested sub-tree tooltip.data-tip='tooltip',
the value directly used.
In this version,
the information is contained in the attribute of the relevant Element,
as such it cannot accomodate arbitrary mark-up without using some anti-pattern
like embedding HTML into attribute values, but makes it very tightly coupled
and works well for small tool-tips to keep them from clutering the source.
In this example, the tooltip text is stored in
data-tip.
Hovering this paragraph reveals its tool-tip.
In this version, the information is contained
within a root aside,
marked class='data-tip'.
The sub-tree is placed within its relevant Element,
in this case, a section
flagged with an empty
data-tip.
In the end this is all purely conventional.
Alternatives could be, any tag
specific to this context, or a recycled/second
data-attr flagged root, etc.
The only real choice is between an Element or an Attribute based tool-tip.