\n\n\n\n
- \n
- Adding a Popover to a Content Page<\/a><\/li>\n\n\n\n
- Content Panel<\/a><\/li>\n\n\n\n
- Additional Resources<\/a><\/li>\n<\/ul>\n\n\n\n
Adding a Popover to a Content Page<\/h2>\n\n\n\n
You can add as many Popovers as needed to a content page within your Canvas course.<\/p>\n\n\n\n
While editing content in your Canvas course, launch the DesignPLUS Sidebar by clicking on the \ud83d\ude80 rocket ship icon<\/strong> at the top right corner of the screen.<\/p>\n\n\n\n
- \n
- Alternatively, press Alt\/Option + Shift + D<\/strong> on your keyboard.<\/li>\n<\/ul>\n\n\n\n
Within your paragraph of text, highlight the word or phrase you would like to make as a Popover.<\/p>\n\n\n\n
- \n
- Alternatively, place your cursor within a paragraph of text at the point where you want to insert the Popover.<\/li>\n<\/ul>\n\n\n\n
In the DesignPLUS Sidebar, click on the \u2795 Add New Elements<\/strong> tab.<\/p>\n\n\n\n
Click the Popover<\/strong> button (found under the Interactive Content<\/strong> or Recently Used Tools<\/strong> headings).<\/p>\n\n\n\n
- \n
- Alternatively, use the Search<\/strong> textbox to search for Popover<\/strong>. DesignPLUS will show results in real-time. Click the \u2716\ufe0f icon to clear your search.<\/li>\n<\/ul>\n\n\n\n
![\"A](\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_Popover.png\")
<\/figure>\n<\/div>\n\n\nContent Panel<\/h2>\n\n\n\n
In the following example, when a student clicks on the acronym LMS<\/strong>, a Popover appears displaying the words “Learning Management System” and an image of the Canvas Learning Management System Dashboard.<\/p>\n\n\n\n
![\"A](\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_Popover_StudentView1-1024x313.png\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
![\"A](\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_Popover_StudentView2-1024x342.png\")
<\/figure>\n\n\n\nIt is highly recommended to use the Content<\/strong> panel to make any updates to your Popovers. This panel provides a dedicated textbox to safely edit the Trigger Text.<\/p>\n\n\n\n
- \n
- Trigger Text:<\/strong> The visible word or phrase that students click on.<\/li>\n\n\n\n
- \ud83d\udd01 Convert to Dialog Box<\/a>:<\/strong> Convert the Popover to the Dialog Box<\/a> tool.<\/li>\n<\/ul>\n\n\n
\n![\"A](\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_Popover_ContentPanel.png\")
<\/figure>\n<\/div>\n\n\nAfter editing the text in the Content<\/strong> panel, press Enter<\/strong> on your keyboard or click anywhere outside the text box to update the Canvas Rich Content Editor (RCE).<\/p>\n\n\n\n
Inside the Canvas RCE, locate the light gray area tagged with Popover Content<\/strong>. You can use this space to add any text, images, videos, or other media you want to display in your Popover.<\/p>\n\n\n\n
![\"A](\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_Popover_EditInRCE.png\")
<\/figure>\n\n\n\nSave<\/strong> or Save & Publish<\/strong> your content page to test out the Popover.<\/p>\n\n\n\n
Additional Resources<\/h2>\n\n\n\n
- \n
- Popovers: [New] DesignPLUS User Guide<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Popovers are an excellent tool for keeping your course pages clean and streamlined. They allow you to hide additional content until a user clicks a linked word or phrase. Here is how they compare to similar tools: Adding a Popover to a Content Page You can add as many Popovers as needed to a content … Continue reading “DesignPLUS Popovers”<\/span><\/a><\/p>\n","protected":false},"author":4255,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[4,244],"tags":[24,121,298,504,527,529,476],"class_list":["post-7032","post","type-post","status-publish","format-standard","hentry","category-canvas","category-cidi-labs","tag-content","tag-designplus","tag-page","tag-panel","tag-popover","tag-popovers","tag-text"],"author_meta":{"display_name":"Chris Hofer","author_link":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/author\/chofer\/"},"featured_img":null,"coauthors":[],"tax_additional":{"categories":{"linked":["Canvas<\/a>","Cidi Labs<\/a>"],"unlinked":["Canvas<\/span>","Cidi Labs<\/span>"]},"tags":{"linked":["Content<\/a>","DesignPLUS<\/a>","Page<\/a>","Panel<\/a>","Popover<\/a>","Popovers<\/a>","text<\/a>"],"unlinked":["Content<\/span>","DesignPLUS<\/span>","Page<\/span>","Panel<\/span>","Popover<\/span>","Popovers<\/span>","text<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 1 month ago","modified":"Updated 4 weeks ago"},"absolute_dates":{"created":"Posted on March 12, 2026","modified":"Updated on March 16, 2026"},"absolute_dates_time":{"created":"Posted on March 12, 2026 9:36 pm","modified":"Updated on March 16, 2026 6:22 pm"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/posts\/7032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/users\/4255"}],"replies":[{"embeddable":true,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/comments?post=7032"}],"version-history":[{"count":10,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/posts\/7032\/revisions"}],"predecessor-version":[{"id":7047,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/posts\/7032\/revisions\/7047"}],"wp:attachment":[{"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/media?parent=7032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/categories?post=7032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/tags?post=7032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- \ud83d\udd01 Convert to Dialog Box<\/a>:<\/strong> Convert the Popover to the Dialog Box<\/a> tool.<\/li>\n<\/ul>\n\n\n
- Trigger Text:<\/strong> The visible word or phrase that students click on.<\/li>\n\n\n\n
- Alternatively, use the Search<\/strong> textbox to search for Popover<\/strong>. DesignPLUS will show results in real-time. Click the \u2716\ufe0f icon to clear your search.<\/li>\n<\/ul>\n\n\n
- Alternatively, place your cursor within a paragraph of text at the point where you want to insert the Popover.<\/li>\n<\/ul>\n\n\n\n
- Content Panel<\/a><\/li>\n\n\n\n