User Guide Navigation

Advanced Elements Add Popup Content

With the Popup Content tool, you can add a 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.
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

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

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.

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.