The Admin Bar

Creating Animated Tooltips in GenerateBlocks

Dec 26, 2021

By: Kyle Van Deusen

Filed Under:

This page contains affiliate links in accordance with our affiliate policy.
☀ Read in Light Mode

I recently found myself in a position where I needed to add some tooltips for more context to a row of buttons. Unfortunately, there's no settings inside GenerateBlocks to add tooltips, and the last thing I wanted to do was install an entire plugin just to handle this simple feature.

Thankfully there's an easy way to do it with a pinch of CSS and taking advantage of the built-in Custom Attributes feature.

Animated example of the tooltip from this tutorial
Animated Tooltips

CSS for the Tooltip

For the CSS, I found an awesome video by Web Dev Simplified that walks you everything you need to setup this tooltip.

I'll provide the copy/paste CSS below, but if you want to get a good handle on how everything works (in case you want to manipulate it and don't know where to start), I'd suggest watching the video.

Here's the CSS you need to copy and paste into your site's child theme or additional CSS in the customizer:

.tooltip{
	position: relative;
}

.tooltip:before,
.tooltip:after{
	--scale: 0;	
	--arrow-size: 8px;
	--tooltip-color: hsla(191, 0%, 95%, 0.9);
        --tooltip-text-color: #222222;
	position: absolute;
	top: -.25rem;
	left: 50%;
	transform: translateX(-50%)  translateY(var(--translate-y, 0)) scale(var(--scale));
	transition: 150ms transform;
	transform-origin: bottom center;
}

.tooltip:before{
	--translate-y: calc(-100% - var(--arrow-size));
	content: attr(data-tooltip);
        color: var(--tooltip-text-color);
	font-size: .8rem; 
	line-height: 1;
	padding: .4rem .6rem;
	width: max-content;
	background: var(--tooltip-color);	
	border-radius: .3rem;
	text-align: center;
}

.tooltip:hover:before,
.tooltip:hover:after{
	--scale: 1;
}

.tooltip:after{
	--translate-y: calc(-1 * var(--arrow-size));
	content:'';
	border: var(--arrow-size) solid transparent;
	border-top-color: var(--tooltip-color);
	transform-origin: top center;
}

This CSS will give you a small, light gray, semi-transparent tooltip with dark grey text. If you want to manipulate the colors, you can change the values in the --tooltip-color and --tooltip-text-color variables.

Adding Your Tooltip Class

To add the tooltip to any GenerateBlocks element, select the element and type in the word tooltip into the "Additional CSS class(es)" field under the "Advanced" tab.

Adding a class to an element
Additional CSS class(es) in the Advanced tab

Adding Your Tooltip Text

What's really neat about this tooltip solution is that it uses the data attributes built into GeneratePress to create the text for your tooltip.

This means you only have to put in the CSS for the tooltip once, and you can control the content on an element-by-element basis without using JS to bring in text from your HTML to your CSS.

Setting your tooltip text is simple:

With your element still selected, in the "Advanced" tab, just underneath where you added the "tooltip" class, click the "Add Attribute" button.

In the first field type: data-tooltip. In the second field, type in the text you want to appear inside of your tooltip (in the example below, the tooltip will say "Save to Favorites").

Adding a custom attribute
Custom Attribute in the Advanced tab

Checking Your Work

With the CSS added to your stylesheet, the selector added to your element, and the custom attribute set, your tooltip should be ready to go!

At this point, you can add a tooltip to any GenerateBlock element by simply adding the class and the custom attribute.

Keep in mind, the tooltip will not display on the backend while you're editing, so you'll have to save your work and view it on the front end to confirm everything is working correctly.

tab headshot ml
Kyle Van Deusen
@kylevandeusen

Kyle is the co-host of The Admin Bar, the owner of a agency of one called OGAL Web Design and the co-founder of Docket WP. You’ll likely find him trolling The Admin Bar community.

Enjoy this? Become an Official Barfly!

More from The Bulletin Board

Product

The Website Owner's Manual: A Complete Walkthrough

Everything you could possibly want to know about The Website Owner's Manual
Kyle Van Deusen
Jan 07, 2022
Processes

5 Tips to Improve Your Block Building Experience

5 ways to improve your experience using Generate Blocks and the default block editor.
Kyle Van Deusen
Jan 07, 2022
Content Marketing

How To Create A Content Strategy

With clients slowly going quiet over the holidays and with the new year fast approaching, you’re probably thinking about your...
Abby Wood
Dec 27, 2021

Join Our Community

The Admin Bar Facebook group is at the heart of what we do. Join in on the daily conversation and get involved.
Join the Community
tab phone 4k member
© The Admin Bar (a Division of OGAL Web Design) — All Rights Reserved
• Live
Outbound Monthly Recurring Revenue
crossmenu