tool tip
By accessing content found on another page in your website we can display data to our users without requiring them to leave the existing page, reducing page loads has been proven to increase user retention rates, we can also reduce the initial load time as content will only be loaded when requested.
In this example we can display the members of a team in a grid, the pop up module will be populated by content from their profile, an example of which can be seen here.
For this second example we can present information from another page in a similar way to wikipedia displays their info boxes. The content displayed in the tooltip is being found in a div with the ID of #preview. Simply hover over the links in this paragraph to see it in action. Any link found with the class .tooltip-link will activate a tooltip. You can also include images, or in-fact any content inside of the tooltip.
You will need to create a hidden element with a class name of .tooltip. This element shouldn't have a parent and be fixed, see the preview file for this page to find the actual tool tip used in this example. It will also need the ID of tooltip.
You'll need to apply an interaction onto the page wrapper to allow the tooltip to follow the users mouse, a similar interaction will need to be set on the class of the .tooltip-link to hide and show it when hovering over a link.
tool tip
