Challenge Overview
We have a sample application that contains a table with three rows and each row has an image and a username next to the image. A tooltip is displayed when hovering over the image.
This tooltip contains html markup. The tooltip is displayed using Angular UI Bootstrap's tooltip directive (tooltip-html-unsafe).
Currently the tooltip is compiled when the page loads - that is when the page loads, the HTML code inside the tooltip is compiled and when the user hovers the mouse pointer over the image, the tooltip is shown.
The above is very inefficent. Imagine hundreds of rows in the table, each having an image and a tooltip with HTML content. It is a performance bottleneck to have all the tooltips compiled during page load.
Instead, we want the tooltip to be compiled only when the user hovers the mouse pointer over the image and then after compiling shown to the user.
One approach would be to create a directive that uses $compile service and shows the tooltip, but we are open for other approaches.
The solution that will be accepted will:
1. prevent the HTML code inside the tooltip from getting compiled at page load
2. compile the HTML code inside the tooltip only on mouseover event (when user hovers over the image thumbnail)
3. show the tooltip after compilation (on mouseover)
4. hide the tooltip after user moves mouse pointer away from image
5. carry out the above steps seamlessly and without any hiccups (for example - too much time taken in compiling on mouseover, browser gets stuck on mouseover during compilation - such solutions will be rejected)
6. have code that is commented well and the approach taken is understood easily
Please submit the entire application and not just the changes. Refer to submission guidelines below and a sample application has been provided under the "Downloads" section to the right side of this page.
Final Submission Guidelines
The sample application makes use of:
1. AngularJS (1.1.5) - angularjs.org
2. Angular UI Bootstrap (0.4.0) - angular-ui.github.io/
3. jquery (1.9.1) - www.jquery.com
You are advised to make use of the same libraries (including same version). If you have anything else in mind, please clarify in the forums first.