Tool tips

Tooltips Component

Create a new component for AEM component library, which serve the purpose of tooltips & other opportunities for homedepot.ca

The Solution

Tool tips will solve the problem of having text on images. It will guide customers to a specific product or landing page in order to provide our customers a better online experience.

Style & Colour

The default state of the tooltips button will be white with a faint halo. When hovering the button will turn into the home depot orange.


On click, the cross will appear, and the information window will pop-up flowing on top of the image.


Users can choose to apply light or dark backgrounds depending on the brightness of the image.

The Mobile Experience

In mobile view, when clicking on the tooltips the pop-up window will overlay on top of other contents on the page. Customer can easily identify a pop-up window is opened, and they can click on anywhere to close it.

Share by: