Tooltip Styles Inspiration

A small collection of various hover tooltip styles and effects for your inspiration. Using CSS transforms, border-radius and SVG shapes we can create modern looking and interesting tooltips.

From our sponsor: Sign up for Mailchimp today.

Today we’d like to share some tooltip styles and effects with you. Tooltips are normally used for providing some kind of extra information and they can be found in almost every website. Those tiny little helpers offer a great opportunity to add some subtle and unique effects to any design. So today we want to show you some possibilities of showing those elements in style.

We only use CSS transitions via hover and also some SVGs to create unique shapes. Icons are from Font Awesome and the profile pictures are from the Random User Generator.

Please note that we use some modern CSS properties, like 3D transforms, which only work in modern browsers.

There seems to be an issue with using a percentage-based transform-origin value for SVG paths in Firefox. You might not be able to see the correct transform effect, so we recommend using Google Chrome to see all the examples working correctly.

Also note that animating the stroke-dasharray does not work in the IE < 11.

The examples are CSS-only using hover to show the tootlips, which is not a mobile solution. You would want to use some JavaScript for controlling the appearance on click, rather than hover in that case. A full-blown solution would also take the positioning of the tooltip into account so that they don’t appear off-screen. Some useful solutions are the following:

Let’s have a look at the “sharp” tooltip style. The markup is as follows:

<blockquote>
	<p>A man of my <span class="tooltip tooltip-turnright"><span class="tooltip-item">spiritual</span><span class="tooltip-content"><strong>[spir·it·u·al]</strong> affecting the human spirit or soul as opposed to material or physical things</span></span> intensity does not eat <span class="tooltip tooltip-turnleft"><span class="tooltip-item">corpses</span><span class="tooltip-content"><strong>[corpse]</strong> dead body, body, carcass, skeleton, remains, mortal remains, rotten bacon</span></span>.</p>
	<footer><span class="tooltip tooltip-turnright"><span class="tooltip-item">George Bernard Shaw</span><span class="tooltip-content"><strong>George Bernard Shaw</strong> (26 July 1856 – 2 November 1950) was an Irish playwright and a co-founder of the London School of Economics.</span></span></footer>
</blockquote>	

We have two tooltip variations: the one that turns the tip to the left and the one that has it turned to the right. For this example we will be using an SVG shape for the tip.

TooltipStylesInspiration01

So, let’s have a look at the CSS:

@import url(http://fonts.googleapis.com/css?family=Kalam:700,400);

.tooltip {
	position: relative;
	z-index: 999;
}

This is our trigger text:

.tooltip-item {
	font-weight: bold;
	cursor: pointer;
}

The content of the tooltip will have a matching border radius that fits with the sharp tip. We’ll position it absolutely right above the trigger item and then adjust the position with margins. While the width is fixed, the height will increase as needed. Initially, we’ll set it to be transparent.

.tooltip-content {
	position: absolute;
	bottom: 100%;
	left: 50%;
	z-index: 9999;
	margin: 0 0 105px -140px;
	padding: 25px;
	width: 280px;
	border-radius: 10px/50%;
	background: #fff;
	color: #dd5864;
	text-align: left;
	font-size: 16px;
	opacity: 0;
	cursor: default;
	transition: opacity 0.3s, transform 0.3s;
	pointer-events: none;
}

Depending on the turn of the tip, we’ll set the according rotation of the content. We basically want the content to rotate along with the tip, creating an “opening” effect.

.tooltip-turnright .tooltip-content {
	transform: translate3d(0,50px,0) rotate3d(1,1,1,6deg);
}

.tooltip-turnleft .tooltip-content {
	transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg);
}

On hover, we show the content:

.tooltip:hover .tooltip-content {
	opacity: 1;
	transform: translate3d(0,0,0);
	pointer-events: auto;
}

Now, let’s have a look at that tip. We’ll be using the ::after pseudo element to add the tip, which is a SVG:


.tooltip-content::after {
	position: absolute;
	top: 100%;
	width: 60px;
	height: 120px;
	background: url(../img/tooltip3.svg) no-repeat center center;
	background-size: 100%;
	content: '';
	transition: transform 0.3s;
	transform-origin: 50% 0;
}

Depending on how we want the tip to turn, we set the rotation. You’ll notice that we use scale3d(-1,1,1) for the right turning tip. This is a way of “reflecting” or “mirroring” an element with CSS.

.tooltip-turnright .tooltip-content::after {
	left: 25%;
	transform: scale3d(-1,1,1) rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
}

.tooltip-turnleft .tooltip-content::after {
	right: 25%;
	transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
}

On hover, we reset the transforms to the final position:

.tooltip-turnright:hover .tooltip-content::after {
	transform: scale3d(-1,1,1) rotate3d(1,1,1,0) translate3d(0,-5px,0);
}

.tooltip-turnleft:hover .tooltip-content::after {
	transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
}

And that all makes an exquisite tooltip with a unique shape.

We hope you enjoy these styles and get inspired 🙂

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 54

Comments are closed.
    • Very nice / smooth / usefull ! Thanks for sharing / always exciting when i click to discover a new demo from codrops !

  1. EXCELLENT article! This is one of the few sites that I look forward to getting updates from via email feed.

    Then when I see it is Mary Lou’s work, know it is going to be informative.

    Thank you for sharing your knowledge. It makes me look like a genius to my clients:)

  2. Love your ideas Mary Lou, thank you! I’m totally inspired and going to use the “classic” with some small modifications.

  3. Brilliant work here Mary Lou! I can’t wait to play around with these. Ideas are flowing like mad already.

  4. Turned it into a WordPress shortcode and used one of them in a project I’m working on 🙂 Its great and inspiring, thank you

  5. Each time I think I’ve seen it all, you amaze me, again…
    Thanks for all of these, they’re awesome!

  6. Hi, Thank you so much for this cool and inspiring tooltip.
    I do have one simple Question?
    + How do i integrate this into my web-page , instead of building on the same page?

    Thank you.

    • Have you tried Playful Little Tooltip Ideas. These tooltips are great. I just can’t seem to get them to run in wordpress. If you have any ideas, let me know.

  7. Hi, thanks for this tutorial and source code. How to position tooltip below the item?

    • On .tooltip-content change bottom: 100% to top: 100% . Also, make sure you change the orientation of the tooltip’ arrow.

  8. hi, this is aswome every style of portfolio i was downloaded. you may be a perfectionicts.i am gelious of your work… thank you

  9. Hi,
    Anybody please tell me, can I use these tooltips in wordpress website in team slider image to show text regarding each employee when hover on his/her image.

    any help will be appreciated.

    Best Regards.

  10. Hi,
    I downloaded Tooltip Crazy free . There’s only effect the default layout and default settings. Is there a picture or video instruction? I would appreciate your help .
    Thank you

  11. Hi, firstly thank you Mary for this work. Very impressed with it. I wanted to see if i can use the curved tooltip for an upcoming event. The ground will have different booths and i want user to know what this booths are.

    my question is, how to set the red circles to a fixed location. Left & Right to set to a precious location on the background image. (Like placed pins on google map.)

    Any help would be appreciated.

  12. Could you update your tooltip examples to be accessible by mouse users and by users who can only use a keyboard? These currently only appear on mouse hover. Thanks.