A few examples of simple tooltips serving as the name or description of buttons and form fields. They work with mouse and keyboard, and are dismissable with
Escape or by clicking the "x". This allows the tooltips to meet WCAG 2.1 Content on Hover or Focus.
This tooltip is a child of the button element, but could also live outside the button in conjunction with
This pen does not do viewport collision detection, which would be a good idea to add for production-ready tooltips.
It also does not handle preventing multiple overlapping tooltips (e.g. with combined focus & hover) which would be a good idea, particularly when open tooltips may overlap, e.g. within a menubar or toolbar.