DesignPLUS Tooltips

Tooltips are small, interactive pop-up boxes that appear when users hover their cursor over a specific word or phrase. They are an excellent way to provide students with quick definitions, helpful hints, or extra context without cluttering your page design. By using tooltips, you can keep your course content clean and streamlined while ensuring learners have immediate access to the clarifying details they need.

Tooltips support plain text only and cannot be used with other elements such as icons or images. If you wish to include these elements, consider using Dialog Boxes or Popovers instead.

Adding a Tooltip to a Content Page

You can add as many Tooltips as needed to a content page within your Canvas course.

While editing content in your Canvas course, launch the DesignPLUS Sidebar by clicking on the 🚀 rocket ship icon at the top right corner of the screen.

  • Alternatively, press Alt/Option + Shift + D on your keyboard.

Within your paragraph of text, highlight the word or phrase you would like to make as a Tooltip.

  • Alternatively, place your cursor within a paragraph of text at the point where you want to insert the Tooltip.

In the DesignPLUS Sidebar, click on the ➕ Add New Elements tab.

Click the Tooltip button (found under the Interactive Content or Recently Used Tools headings).

  • Alternatively, use the Search textbox to search for Tooltip. DesignPLUS will show results in real-time. Click the ✖️ icon to clear your search.
A screenshot of the DesignPLUS Sidebar demonstrates accessing the 'Tooltip' tool. An initial arrow points to the 'Add New Elements' tab in the top navigation bar, which is identifiable by a large plus sign and is the current view. Within the active 'Add New Elements' panel, two other arrows point to the primary methods for finding the tool: one points to the 'Search' input field for typing and the other points directly to the 'Tooltip' button, which is shown in the 'Recently Used Tools' list with a chat bubble icon. Other nearby, un-highlighted tools like 'Popover' and 'Flip Cards' are visible.

Content Panel

In the following example, when a student hovers over the acronym LMS, a Tooltip appears displaying the full phrase Learning Management System.

An example of an active tooltip within a sentence. Below the heading "Tooltip," the text reads: "The new software update significantly improves the [highlighted] LMS response time." Floating above the acronym "LMS" is a black pop-up bubble containing the text: "Learning Management System."

It is highly recommended to use the Content panel to make any updates to your Tooltips. This panel provides dedicated textboxes to safely edit both parts of the tool:

  • Trigger Text: The visible word or phrase that students hover over.
  • Content Text: The hidden message or definition that pops up.
A screenshot from the Canvas LMS shows the open "Content" panel for the Tooltip tool in the DesignPLUS Sidebar. The panel features a blue header labeled "Content" with a downward arrow. Inside, there are two labeled text entry fields: the first, labeled "Trigger Text", contains "LMS"; the second, labeled "Content Text", contains "Learning Management System".

After editing the text in the Content panel, press Enter on your keyboard or click anywhere outside the text box to update the Canvas Rich Content Editor (RCE).

A screenshot of the Canvas Rich Content Editor toolbar positioned above an editable text region showing a DesignPLUS tooltip implementation. The visible sentence reads, "The new software update significantly improves the" followed by a small label "Tip," the highlighted trigger word "LMS" enclosed in dotted borders, and a black box containing the definition text, "Learning Management System," inserted directly after. The sentence concludes with "response time."

Save or Save & Publish your content page to test out the Tooltip.

Additional Resources