CSS Advanced Tutorial: Animating tooltips

Animating tooltips

Animating tool tips.

Let's learn more about how transitions work by creating and animating tool tips on our links in this

lesson we'll write a simple script to generate tool tips for our links using a bit of JavaScript and

the links titled attribute.

We'll then make use of transitions on multiple properties and set up different transitions from mice

over at my site.

We'll also see how we can use a transition on a property that might not seem like something we can transition

the visibility property to get started.

Open the module to sample code file and open folder 0 1 anchors in the 0 2 folder.

A completed version of this lessons code is in the folder 0 2 tool tips

here's what we're going to build.

We begin with the same hover effect we created in Lesson 1 when we hover the link we see a tooltip appear

containing some helpful information related to the link.

Let's get started.

We begin with our e-mail file in the file.

Index today's.

Are the title attributes to the anchor tag.

We will also add a class anchor tooltip which we can use later to make sure our javascript only works

to build tool tips from the right links.

Next we'll create our JavaScript file.

Start by making a new folder called javascript and within that a file called tooltip style J.S..

We want our javascript to look for any links with the class anchor tooltip so we'll use the document

dot query selector all method to get them

then we set up a loop within which we can generate the tool tips

inside this loop.

We want to get the title attribute

and then setup a span element to contain our text from the title attribute.

We then set the class name so that we can style this attribute

and apply the title contents to this new element.

Lastly we append this to the anchor so that the span element is inside the link.

This will allow us to position it above the link

with this in place.

We'll link toward javascript filed before the closing body tag in our index studies.

Al file

with our javascript generating are titled tooltip elements we can I style them

we start by creating a new file called tooltip start CSX and linking it from our index studies to email

in the head of the index file the link to the new style sheet

next in tooltip start CSX.

We can style our tooltip.

First we add some initial styles for the tool tips

let's go through what we have here.

We're giving the tooltip a background color border font size with on putting we're positioning them

absolutely and using a little bit of CSX trickery in the left property to calculate the halfway point.

Then shift it back half the width of the tooltip this ensures that the tooltip is centered over the

link.

Lastly we set the text to be center aligned and apply a z index to make sure it sits in front of other

content.

The second block is a subtle detail.

It generates a small arrow and positions it in the middle beneath the tooltip.

This makes it look more like a speech bubble.

Let's see how it looks.

With the tooltip in place we can next make it show on hover

first will make the tooltip invisible.

And use it transform to move it up a little that way is an animate downward when it shows.

Next we need some way to make this tooltip visible.

Since we know it's going to be inside an anchor with class anchor tooltip we can put the hover on the

anchor itself

we set up a block of styles for the anchor tooltip hover titled tooltip

and set the opacity to 1 with no transform.

We should know I have two states.

This looks like we're along the right track but there's a problem.

Even though the element has opacity set to zero it's still technically part of the page.

If we hovered near the top of the link the tooltip appears it could also get in the way if we wanted

to select text or even interfere with other elements.

Let's hide it.

Using the visibility property

back in the title tooltip block set visibility to hidden

in the hover state.

We set visibility to visible.

We now have a tooltip invisible both in terms of opacity but also visibility so it no longer blocks

the content sitting behind it.

Neither we have the hidden invisible states working.

Let's add some transitions to pull it altogether in the title tooltip block we add a transition for

the opacity and transform.

First we add a transition for the opacity making it fade in fast.

Just point two seconds with the easiest timing function then we add a second transition for the transform

this time it'll take a little longer at point five seconds and we'll use the exponential ease arch timing