Blog Entry

Sexy And Responsive Help Tooltips

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.

Categories

About

Hello, and welcome to my blog devoted to all things concerning web design and development.

I am Tim Daniels, a web designer and software developer, currently living in Bere Alston. I graduated from Plymouth University with an Upper Second Class (Hons) Degree in Advanced Web Technologies, and since then, for the last nine years, have been working in the IT industry.

The aim of the blog is to discuss and document any new techniques and tricks that I come across in my quest to become a better developer.

I do not profess to be an expert in any of these topics, but want to build up a knowledge base of modern web design and responsive techniques. Please feel free to download any supplied source code, and to use these components in your own projects.

Tim Daniels Design

I am Tim Daniels, a web designer and software developer, currently living in Bere Alston. The technologies I know well are: C#, JavaScript, CSS, Java, PHP and HTML5. My full C.V. can be downloaded here.