While working on my Gutenberg Development Course I realized that default toolbar buttons have a nice Tooltip that appears over them on hover.
I also remembered seeing a Tooltip component in Gutenberg when walking through the source code. It turns out it is pretty easy to add these in our own block as well.
Setting Up the Tooltip Component
In order for the Tooltip component to work you simply have to get it from the wp.components library. It is found at wp.componentns
Then you simply wrap
<Tooltip></Tooltip> around whatever you want to trigger the tooltip.
The Tooltip takes two parameters:
- text [required] = What text should appear in the tooltip
- position [default “top”] = Determines where the tooltip will appear in relation to the child content
Here is an example of Tooltip in action:
NOTE: This example also includes the Button and Dashicon components. This is not necessary. Tooltip can be wrapped around other components, but I have only been able to get it working in the editor, not on the frontend.
Here is a look at what the code above can create:
Want to Learn More About Gutenberg?