During beta testing for MemLife, we wanted to test tooltips vs. written explanations on key pages.
In searching for an existing simple solution, we came across this really nice example on CodePen: http://codepen.io/cbracco/pen/nufHz
However, as pure CSS there was no way to toggle off the tooltips on iOS. Also, since hover states are less utilized these days, we wanted to switch the event to a click for all-purpose compatibility. For that, we’ll need a dash of javascript.
In the link that follows, click to see the revised tooltips in action: http://feltmedia.com/15/mmb/tooltips/
Main changes to the original version above:
- Add jQuery (we’re using this anyway – other JS methods should work too)
- Added an “active” class in CSS
:hover> jQuery click + toggleClass()- hsla color values > rgba
Since :before and :after handle the display of the tooltip, the CSS transitions are necessary (jQuery can’t target those pseudo elements) and although moved in the stylesheet, the transitions otherwise remain the same.
Posting this version in hopes someone else finds it useful – the credit goes to the original coder for the CSS heavy lifting.
Note: this isn’t very responsive yet. If you need left and right tips, you may run into device edges and will need to enhance the CSS and/or JS to respond to the viewport. For now, it has a simple JS detection for < 420px wide and switches the left/right classes to the default (top).
FREE Movies, TV & 2-Day Shipping! Try Amazon Prime 30-Day Free Trial
