Create Dynamic Hover Tooltips! - Motion.page | GSAP | WordPress

Hello guys, welcome back to the channel.

My name is Luke, and in today’s video—it’s going to be a short one—I just want to show you a new feature that we’ve introduced in version 2.2.0, which is actually still in beta.

I do encourage you to download it. It’s available from your profile page—your dashboard on Motion.page. And if you could provide us with any feedback, that would be awesome.

Basically, we’ve introduced two new features. One of them I’m going to show you today, and that is a cursor tooltip. As you can see, when I hover over these elements, we can see their names coming up like that. This is all being controlled in Motion.page using attributes.

Another feature we’ve introduced—and I’ll be showing you this in a later video—is a mouse follower. On our website at the moment, we already have this implemented. When you move the cursor, you can have little circles—or basically whatever you want—following the cursor. But like I said, that’ll be in a future video. I’m not going to go into that one today.

Today I’m just going to show you this easy setup: how you can create tooltips.

So first things first—let’s go into Bricks Builder.

As you can see, I have these pictures already set up. I’m using Violet from Core Framework just to make this easier. But all you need is any element, really. This works on any element, as long as it has a specific attribute applied.

For this example, let’s use these images.

We have an image here, and if I go to Style > Attributes, you can see it’s currently empty.

I’m going to show you how we can control this.

Let’s go ahead and add an attribute to this.

The attribute name must be: mp-cursor-tooltip.

Motion.page is going to look for this attribute name, and whatever the value is—it will be displayed.

For the value, let’s just do, for example:

John Doe

One nice thing about using attributes is the values can be dynamic, so you can also use dynamic data—which is very good.

I’m going to save this, and before I go to the next step, I’m going to do the same for every picture and make all the names unique.

Alright guys, I’ve just gone ahead and added attributes to all of these images and given them some names.

I’m going to save this once again, and now I’m going to open up Motion.page.

As you can see, I’m using version 2.2.0. Once again, this is the beta.

I’m just going to go ahead and create a new timeline. I’m going to call this one Custom Tooltips.

I’m going to target the homepage, but I also want to check this box—because wherever I have this attribute applied on any page, I want this animation to appear. So I’ll make sure that’s toggled on.

Then, for the trigger, we’re going to use Cursor Tooltip.

As you can see, it says to add mp-cursor-tooltip, which we’ve already done.

There are 15 images, and it says “elements found: 15” — so that’s good.

We also have some default values and properties here.

Max width is 200 pixels, background is going to be white, text color is going to be black.

So if I show you now—when I hover over these images—we do get the values coming through from the attributes.

It’s very flexible. You can even use variables.

For example, if you’re using Core Framework, then you can put your variables in here. Let me show you how that works.

For the background, I’m going to use the variable:

bg-surface

And for the text color, I’ll use:

text-body

As you can see already, we have this nice effect going on using variables.

For the padding, let’s use a space variable. I’m going to use xs for our example.

(Just to show you: if I use l, for example, then there’s a huge space around—as you can see.)

So let’s put this back to xs.

For border radius, let’s do radius-s, something like that—nothing too big.

And then the font size, I’ll set this to our variable as well: text-m. That’s now going to be responsive.

I’m going to add one more property—just a slight shadow.

Box shadow — we’ll use another variable, and for this I’m going to use:

shadow-l (large shadow)

That just pops it up a little bit more from the background.

This looks pretty good.

Now, the benefit of using variables is:

1. It’s going to be responsive.

2. You can control all of this from one place—your Core Framework.

3. If you’re using dark and light mode, this is going to change automatically as well.

I’m going to go ahead and save timeline, and let’s go to the front end.

As you can see, we have the tooltips coming up quite nicely.

I also want to show you the dark mode situation.

So, if I go here and add our theme toggle (please keep in mind, this is coming from Core Framework)…

I’ll just throw that out there—refresh…

You can see we have our tooltips. And when I change this to light mode, because we’re using variables, it also changes with the light and dark theme.

So there you have it, guys.

Just a very simple tutorial today—I wanted to introduce one of the new features in the beta.

Once again, if you have time, please do give it a test. We appreciate any feedback or bug reports you might find. This is the whole reason we’re doing the beta release.

Just a quick disclaimer—please do not use this on production websites. It’s in beta for a reason. Use this on staging or a sandbox site, where you can test and play around with it.

Like I said, in the next video, I’ll be showing you the other new feature, which is the mouse follower—the cursor follower—and I’ll also show you how you can use it with dynamic data.

Thanks for watching this very short tutorial.

I’ll be back very soon with the next video.

Until then, please like and subscribe if you haven’t already—and I’ll see you in the next one.

Thank you!