Creating Animated Tooltips in GenerateBlocks

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 …

Kyle Van Deusen

Published:

Filed Under:

Tools

Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

After spending 15 years as a graphic designer and earning a business degree, I launched my agency, OGAL Web Design, in 2017. A year later, after finding the amazing community around WordPress, I co-found The Admin Bar, which has grown to become the #1 community for WordPress professionals. I'm a husband and proud father of three, and a new resident of the Commonwealth of Virginia.

Animated tooltip in GenerateBlocks cover image
This content contains affiliate links. View our affiliate disclaimer.

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.

Share This Article!
Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

After spending 15 years as a graphic designer and earning a business degree, I launched my agency, OGAL Web Design, in 2017. A year later, after finding the amazing community around WordPress, I co-found The Admin Bar, which has grown to become the #1 community for WordPress professionals. I'm a husband and proud father of three, and a new resident of the Commonwealth of Virginia.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

The Friday Chaser

Wash down the week with the best of The Admin Bar! News, tips, and the best conversations delivered straight to your inbox every Friday!

Latest Events

February 20th, 2024

Making Sense of Security

Going beyond the marketing hype to make informed decisions on security!

January 26th, 2024

Effective Spam Defense for WordPress Forms

Conquer form spam in WordPress with Mark Westguard on Jan 26th. Learn key spam-fighting tactics in our live, interactive session. Register now to transform your forms!

More Articles

Cookie

Google Tightens Privacy Rules: Preparing Your Website for Consent Mode V2

What web agencies need to know about Google’s Consent Mode V2

Copy Paste Keyboard

Help! Someone Stole My Website! What to Do and How to Respond to Website Theft

Oh no! Someone has stolen your entire website! Find out how to get the issue solved, and what you can do when your professional work is copied.

Hand Holding Cut Paper With The Logo Of Recycling 2023 11 27 05 18 33 Utc

Reduce, Reuse, Recycle: 6 Ways to Repurpose Blog Content

Want to make your blog posts stretch a little further? Discover 6 engaging ways to repurpose your existing content to maximize your impact.