Answer :

The interviewer is testing your front-end skills with the simple task of developing CSS tooltip.

Key things to remember and mention:

1. Cross-browser compatibility (issues with IE6, Text browsers, etc.)
2. CSS W3C compliant code
3. High level execution (don't go into the details).
4. Available libraries such as JQuery

Sample pure CSS tooltip code :


a:hover {text-decoration:none;background-color:white;}

a.CSSToolTip div {display:none; width:180px; height:40px; background-color:#DDDDDD; padding:5px; margin:5px; }

a.CSSToolTip:hover div {display:inline; position:absolute; background:white; border:1px solid #1E1E1E; color:#1C1C1C;}


Usage(note div element inside an anchor tag):

<a class='CSSToolTip' href='javascript:void(0)'>Hover me to see css tooltip<div>CommonInterview sample tooltip.</div></a>


JQUERY

It is worth mentioning during the interview that JQuery provide a powerful tooltip plug-in which can be fully customized and attached to any DOM element:

$(selector).tooltip();

This would show your knowledge of a library and the ability to choose right solution depending on the situation.

Plugin demo page: http://jquery.bassistance.de/tooltip/demo/


tooltip.jpg






Answers and Comments