I am in the middle of making a Content Management System back end admin area, that I wanted to be responsive and mobile friendly. Quite a challenge. I find it hard enough creating static websites that work and look good on all devices. Add into the mix unpredictable content management users, and it becomes a real headache.

One bit of functionality I wanted to include was the ability to hover over/click a help or information icon, in order to get some helpful hints as to what sort of input was required (or expected) in a form field. Then I found an awesome blog by Osvaldas Valutis at http://osvaldas.info/

Having already implemented his solution for mobile friendly touch drop drown menus, I was keen to try his tooltips, and I wasn't disappointed. I will be using them a lot more in the future, and am very grateful to Mr Valutis for his excellent coding skills. In fact his blog is one of the best for responsive web design.
Key Features

* They are responsive, relying on a maximum width value when viewed on large screens, and adapting to narrow screen resolutions. They select the best viewiable position relatively to the target (top, bottom; left, center, right);
* They are mobile-friendly. They appear when help information icon is tapped and hide when tapped on the tooltip itself;
* Their content can be HTML formatted, and recognize all major tags.
• How To Implement
• 
  
• Just include the CSS style sheet and script in the head section of the web page, and then assign the attribute rel="tooltip" and title="Enter your tip here" to any of body tags in HTML file where you want the tooltip to pop up when called. Simple. Oh, and make sure you have the latest JQuery library included. 
• 
  
• DEMO  |  SOURCE CODE

Published on 25 June 2014 in Responsive Design