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!

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?