Finding ways to display hidden information for users can be tough. The number of times brochure websites have required some level of user engagement and I have had to scour the web for examples such as these. I thought I should share.
Project Feature Highlights
By adding tooltips into div elements they can be positioned anywhere on a page. I imagine this could get a big fiddly for a responsive page, but nothing a few calculations can’t fix!
https://codepen.io/ianfarb/pen/qkpJH
Intro JS
A step-by-step guide and feature introduction script. It has no dependencies and is pretty small! Very easy to integrate.
Animated Tooltips
Simple, effective use of tooltips. There are three styles. Fading, expanding and swing. By using the HTML5 data-title attribute they minimize the amount of extra HTML required.
https://codepen.io/neogomo/pen/BjqJzr
Automated Tooltips
Attractive, small tooltips that effectively display extra information for the user.
https://codepen.io/adwin/pen/vGqzLq
Animated button with Tooltip
I have included this, not so much for the button, but how the tooltip looks. If this was applied to a product image to show extra information, it would work brilliantly.
https://codepen.io/takeradi/pen/oxbGpb
