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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { | |
| Button, | |
| Dashicon, | |
| Tooltip, | |
| } = wp.components; | |
| // Wrap the Tooltip component around whatever you want to activate the tooltip on hover | |
| <Tooltip | |
| text={ __( 'Add Tooltip Text Here' ) } | |
| > | |
| <Button> | |
| // Change icon to desired dashicon icon or replace component with SVG | |
| <Dashicon icon="edit" /> | |
| </Button> | |
| </Tooltip> |
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?
If you would like to learn more about working with JavaScript in WordPress, check out my Gutenberg Development Course.
Educator Zac Gordon 