Canvas LMS普通教师权限下仅通过内联CSS实现单词Tooltip的可行性咨询

Hey there! Totally get where you’re coming from—trying to build interactive annotated poems without admin access can feel like navigating a maze with half the paths blocked. Good news though: it’s not impossible, and there are a couple of workarounds that fit within Canvas’s restrictions.

Let’s break down the options based on whether you prefer hover-triggered or click-triggered tooltips:

Hover-triggered (browser-native tooltip) #

The simplest solution uses HTML’s built-in title attribute paired with inline CSS to highlight the word. This requires no JS or external stylesheets, so Canvas won’t strip it out. Here’s how to implement it:

<span style="text-decoration: underline; color: #1a73e8; cursor: help;" title="你的单词解释内容放在这里">要标注的单词</span>

• The inline CSS makes the word look clickable/hoverable (underline, color, cursor style)
• Hovering over the word will show the browser’s native tooltip with your explanation
• Caveat: You can’t customize the tooltip’s appearance (it uses the browser’s default styling), but it gets the core job done.

Click-triggered (customizable tooltip) #

If you want more control over the tooltip’s look (like custom colors, font sizes, or positioning), use HTML’s native <details> and <summary> tags with inline CSS. This is click-based instead of hover, but it’s fully customizable and doesn’t rely on JS:

<details style="display: inline-block; position: relative; margin: 0;">
  <summary style="text-decoration: underline; color: #1a73e8; cursor: pointer; display: inline;">要标注的单词</summary>
  <p style="position: absolute; bottom: 120%; left: 0; background: #2d3748; color: #ffffff; padding: 6px 10px; border-radius: 4px; font-size: 0.9em; margin: 0; white-space: nowrap; z-index: 10;">
    这里放详细的单词解释，支持多行哦
  </p>
</details>

• The <summary> acts as your clickable highlighted word
• The content inside <details> (here a <p>) is your tooltip, which you can style extensively with inline CSS
• Since this uses standard HTML elements and only inline CSS, Canvas won’t remove any of it.

The hover option is quick and easy for basic annotations, while the click option gives you more design flexibility. Both work within the constraints of ordinary teacher privileges in Canvas—no admin access or JS required.

内容来源于stack exchange