Popovers, Dialogs, and Tooltips

4 min read

Canvas includes some legacy patterns that use enhanceable_contentand data attributes to turn links and containers into popovers, dialogs, and tooltips. These are powered by Canvas' own JavaScript and CSS and are intended for small pieces of supporting content, not for critical instructions.

The examples below show how to create a simple popover dialog and a tooltip using Canvas' legacy classes, followed by the HTML needed to reproduce them in this Canvas instance. Inline-style alternatives are also included for cases where you do not want to rely on Canvas' JavaScript.

Useful references

Popover dialog (Canvas legacy pattern)

A popover dialog can be created by marking a container with class="enhanceable_content dialog"and linking to it with an anchor. When the link is activated, Canvas turns the target into a popover-style dialog. This relies on Canvas' legacy JavaScript and cannot be recreated with inline styles alone.

This is an example popover dialog. Use it for brief, supporting information instead of critical instructions.

Open dialog example

<div id="example-popover" class="enhanceable_content dialog" popover="auto">
  <p>
    This is an example popover dialog. Use it for brief,
    supporting information instead of critical instructions.
  </p>
</div>
<p>
  <a href="#example-popover" class="btn btn-primary">
    Open dialog example
  </a>
</p>

Because this pattern relies on Canvas' JavaScript, the exact behaviour (for example, how focus is handled and how the dialog is closed) may change over time. Avoid placing essential instructions or assessment content only inside a popover dialog.

Inline-only alternative: always-visible support panel

If you want to avoid relying on Canvas' dialog enhancement, you can present supporting information in a clearly styled panel directly on the page using inline styles. This works without any JavaScript and is more predictable for assistive technologies.

Additional information:

This panel shows information that might otherwise be hidden in a popover. Because it is always visible in the page content, all learners can access it without needing to open a separate dialog.

<div role="note" style="
  padding: 1rem;
  border-radius: 0.375rem;
  border-left: 6px solid #4c9dcd;
  background: #e8f2ff;
">
  <strong>Additional information:</strong>
  <p style="margin: 0.5rem 0 0 0">
    This panel shows information that might otherwise be hidden in a popover.
    Because it is always visible, all learners can access it.
  </p>
</div>

Tooltips (Canvas legacy pattern)

Tooltips can be created by adding a data-tooltip attribute to a link or other element. Canvas uses this attribute to initialise a tooltip with the specified options, such as the tooltip class and position.

The example below shows a link with a tooltip that appears to the right. The visible link text is generic and suitable for use in course content.

Hover or focus the link below to see the tooltip (behaviour may vary between browsers and devices):

More information about this topic

<p>
  <a href="#"
    title="Additional information about this topic."
    data-tooltip='{"tooltipClass":"popover popover-padded","position":"right"}'
  >
    More information about this topic
  </a>
</p>

Tooltips are best used for short, supplementary explanations. They should not be the only place where important instructions or assessment criteria are explained, as some users may not discover or be able to access the tooltip content.

Inline-only alternative: expanded help text

Instead of hiding information in a tooltip, you can place brief help text immediately after the link or phrase, styled so that it is visually distinct but always readable.

You can download the templateThis opens in a new tab and may take a few seconds to load.

<p>
  You can
  <a href="#">download the template</a>
  <span style="
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #eef4ff;
    color: #111322;
    font-size: 0.8rem;
  ">
    This opens in a new tab and may take a few seconds to load.
  </span>
</p>

Accessibility and limitations

  • Popover dialogs and tooltips shown here depend on Canvas' legacy JavaScript and may not fully match modern accessibility recommendations for focus management and announcements.
  • Some learners may not discover tooltips triggered only by hover. Always ensure essential information is available in the main page content.
  • Inline-style alternatives (such as visible panels or brief help text next to a link) are often more robust and predictable for screen reader and keyboard users.
  • If you build your own custom dialog or popover outside Canvas' enhancement system, follow the patterns in the MDN and WAI-ARIA guidance linked above.