User Guide Navigation

Advanced Elements Add Popup Content

With the Popup Content tool, you can add several dynamic popups to the page.

Previously the Modal Dialog tool

Examples

Tooltip Tooltip Text (Mouse over or keyboard focus)

Popover (Mouse over or keyboard focus)

Modal Dialog (Click)

Modal Dialogs

Modals are a bit more intrusive but can provide additional information to students. Modals can contain almost any HTML.

For the sanity of you students, don't overdue this one.

Turning on the Popup Content Tool

This is and Advanced level Design Tool

To turn on this tool:

Click the Design Tools Settings icon in the Jump Menu
Do one of the following:
1. Choose Advanced from the Select a Comfort Level area
2. Manually turn on this tool by finding the Popup Content tool in the list and clicking the switch below the tool name
Close the Design Tools Settings

Interface

New Popup

New popup interface

Options include:

Add Tooltip: Turn selected text into a trigger and add a span for specifying tooltip text.
Add Popover: Turn selected text into a trigger and create div for specifying popover content.
Add Modal: Turn selected text into a trigger and create div for specifying modal content.
Note: The title portion of a modal dialog will only support plain text and cannot support other HTML like images, icons, Math equations, etc.
Examples: View an example tooltip, popover or modal dialog

Existing Tooltip

Existing tooltip interface

Options include:

Highlight Trigger: Will highlight the tooltip trigger in the rich content editor and make sure it is in view in the rich content editor.
Highlight Content: Will highlight the tooltip content in the rich content editor and make sure it is in view in the rich content editor.
Trigger Text: Use this input to quickly change the trigger text.
Tooltip Text: Use this input to quickly change the tooltip text.
Delete tooltip: Delete both the tooltip and its trigger from the rich content editor.
Examples: View an example tooltip, popover or modal dialog

Existing Popover

Existing popover interface

Options include:

Highlight Trigger: Will highlight the tooltip trigger in the rich content editor and make sure it is in view in the rich content editor.
Highlight Content: Will highlight the tooltip content in the rich content editor and make sure it is in view in the rich content editor.
Trigger Text: Use this input to quickly change the trigger text.
Interactive Popup: When this is turned on, the popover becomes interactive and won't close when hovered over or clicked.
Change to Modal: Transform the current popover into a modal dialog.
Delete popover: Delete both the popover and its trigger from the rich content editor.
Examples: View an example tooltip, popover or modal dialog

Existing Modal

Existing modal interface

Note: The title portion of a modal dialog will only support plain text and cannot support other HTML like images, icons, Math equations, etc.

Options include:

Highlight Trigger: Will highlight the tooltip trigger in the rich content editor and make sure it is in view in the rich content editor.
Highlight Content: Will highlight the tooltip content in the rich content editor and make sure it is in view in the rich content editor.
Trigger Text: Use this input to quickly change the trigger text.
Modal Width: Set a width for the modal that will be created. Can be either pixels or %.
Change to Popover: Transform the current modal dialog into a popover.
Delete modal: Delete both the modal and its trigger from the rich content editor.
Examples: View an example tooltip, popover or modal dialog

Math in Tooltips/Popovers

Caution: There are some issues with equation images in tooltips and popovers that we have been unable to resolve.

Here are two different types of equation:

Typed into the editor: \(a+b+c+d+e\)
Image created using the Canvas Insert Math Equation tool $LaTeX: \sqrt{32}$

The typed equation as a tooltip \(a+b+c+d+e\) and the typed equation as a popover tend to work just fine.

However, the image as a tooltip Equation Image: $LaTeX: \sqrt{32}$ and the image as a popover tend to result in the equation being duplicated.

If you put both in a tooltip Typed \(a+b+c+d+e\) and image $LaTeX: \sqrt{32}$ or both in a popover, both equations are duplicated.

Instructions

Add Popup

To add a modal dialog, follow these steps:

Open the page for editing.
Click Launch Design Tools.
In the content, highlight the text you want to become the trigger.
On the Design Tools menu, click Add Advanced Elements.
In the Add Advanced Elements section, click Popup Content.
In the Popup Content panel, select the desired popup type.
Edit the trigger text and content as desired.
On the content page, click Save.

Note: The title portion of a modal dialog will only support plain text and cannot support other HTML like images, icons, Math equations, etc.

Warning: Multiple Popups

Just because you can add multiple modal dialogs, popovers and tooltips per page does not mean that you should. Please think through your design and be considerate of your students. Don't make your students or me regret building this feature.

Delete Popup

To delete a popup and its triggers, follow these steps:

Open the page for editing.
Click Launch Design Tools.
In the content, place the cursor in the trigger or content of the popup you want to remove.
On the Design Tools menu, click Add Advanced Elements.
In the Add Advanced Elements section, click Popup Content.
In the Popup Content panel, click Delete [popup type].
On the content page, click Save.