Creative tooltip styles

Creative Tooltip Styles

[Demo/Download] Creative collection of various hover Creative Tooltip styles and effects for your inspiration. Using CSS transforms, border-radius and SVG shapes we can create modern looking and interesting tooltips.

We’d like to share some Creative Tooltips 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.

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.

Some useful solutions are the following: 

Tipped



jQuery UI Tooltip



CSS Tooltips built on Tether



jQuery Tooltipsy



jQuery PowerTip



Opentip

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="tooltipitem">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 tooltipturnleft"><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 Creative 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.

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 Creative 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.

[Demo/Download]