How to Use the Tooltip Component in Gutenberg

While working on my Gutenberg Development Course I realized that default toolbar buttons have a nice Tooltip that appears over them on hover.

Gutenberg Link Tooltip.png
Example of the tooltip component in action with the Bold button

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:

High Contast View.png
Example of tooltip applied to custom block button

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s