Tooltips can be found whenever title attribute is added to any html tag. Title attribute on hover, shows a default tooltip with text representing advisory information related to element it belongs to. In this article we will be adding custom animation to the default appearance of title tooltips. Wait, are we adding or replacing it with custom styles. Let’s see.
This is a two part series. You are currently at
- Animated Tootltips with CSS and JavaScript Part 1
- Animated Tootltips with CSS and JavaScript Part 2 (coming soon..)
So for this tutorial we will be using CSS generated content or Pseudo Elements ::after and ::before. After reading the CSS section, you will have fair knowledge to create you own custom tooltips but If you really wanted to dive deep than there is also a second part using JavaScript to .
HTML for the Tooltips
<H1>Bulding Your First Website</H1> <h2>Languages to Learn</h2> <p>In order to create a website, we need to have a basic knowledge of <abbr title="Hypertext Markup Language">HTML</abbr> and as well as <abbr title="Cascading Style Sheet">CSS</abbr>.</p>
In above html code we have wrapped the acronym HTML and CSS with another <abbr> tag and according to the rules the title should only contain the full description of acronym and nothing else.
Customizing our Tooltips with Styles
abbr{ border-bottom: 1px dotted; cursor:help; position: relative; } abbr::after,abbr::before{ position: absolute; left: 50%; bottom: 100%; transform: translate(-50%); }
Code from line 1 to line 5 tells the browser that it contains a descriptive information by adding a dotted lines to it’s bottom. Relative position is just setting the stage for it’s child element i-e ::before and ::after. From line 6 on wards, the abstract generated content is absolutely positioned relative to their parent. The last line is horizontally centering the pseudo element by using the CSS transform property.
Go ahead and click on the View Demo button to get the idea, this will also make me easier to explain the following code.
abbr:hover::before{ content:""; color:#000; opacity:0; background:#000; width:10px; height: 10px; border-radius:50%; animation-name: emerges, expands; animation-timing-function: cubic-bezier(0.24, -0.68, 0.82, 1.71), ease-out; animation-delay:0s,1s; animation-duration:1s,0.5s; animation-fill-mode:forwards,forwards; }
In the first three lines of above ruleset, we are setting content to empty string because the ::before part will be considered as background for our forthcoming animated tooltips. As our animation starts with small circle, that’s what we are doing from Line 6 to line 9. The last batch of lines are doing all the animation magic. Although we have a shorthand animation syntax but for more than one animations, separate property need to be used.
@keyframes fadein{ from{ opacity:0; } to{ opacity:1; } } @keyframes expands{ from{ width:10px } to{ width:200px; height: 50px; border-radius:4px } }
First animation name is emerges which fades in the small circle with a bounce like effect at end thanks to cubic-bezier. The second animation is self explanatory by it’s name expands jut expand a circle into it’s final state. As we have transformed a cricle into a circular shape that’s why we have changed it’s border radius from 50% to 4px.
Displaying tooltips text using ::after
abbr:hover::after{ content: attr(title); color: #fff; text-align: center; line-height: 50px; width: 186px; animation: fadein 1s ease-out 1.5s forwards; } @keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }
The content property accept attr value which returns the value of element attribute. The color is set to white as default black foreground is not visible on black background color of ::before element.
Part 2 of Animated tooltips series
In the second part we will use JavaScript to cover this tooltips topic further. For the sake of simplicity, I focused on CSS to create a custom tooltips. I hope you have enjoyed reading this article as well as I have enjoyed writing it.