Insert a tooltip in the Navigation widget

This tutorial demonstrates how to configure the Navigation widget to display a tooltip on mouse over. It uses custom field to hold the value of the tooltip and modifies the Navigation widget template to display different tooltips for different navigation tabs.

Perform the following:

1. Create three pages and name them PageA, PageB, and PageC.
2. In the right pane of the Pages page, click Custom fields.
3. Click Add a field…
4. In Type, select Short text.
5. In Name, enter Hint and click Continue » Done » Save changes.
6. Open PageA for editing and drop the Navigation widget on the page.
   The Navigation widget displays the pages created in Step 1.
7. Click the Edit button of the Navigation widget.
8. In Display, select Top-level pages.
9. In Template, select Horizontal (one-level).
10. Click Edit selected template.
11. Change the template by replacing with one another the following sections:
12. Save the changes to the template.
13. Save the changes to the widget and publish the page.
14. In the pages grid, for each of the pages created in Step 1, click Actions » Titles &  Properties.
    You can see the custom field Hint at the end of the form.
    • For PageA, enter This is A!
    • For PageB, enter This is B!
    • For PageC, enter This is C!
15. Open PageA in a browser.
    When you hover over a tab in the Navigation, you can see the respective tooltip displayed. For example, when you hover over tab PageB, you see tooltip This is B!