Tooltips: html and inline css only, no js

Question

I suspect the answer to this question is simply that it's not possible, but thought I would ask in case I've missed something.

I am a teacher using the Canvas LMS (instructure). I can code, I have an IT degree, but I do not have any admin access or any role in managing the LMS, just ordinary teacher privileges.

Canvas has a html editor when you create any page or assignment, but it does not allow any javascript, stylesheets, or style tags. I can use inline css, but not inline js. If I type in any of these, they just get deleted automatically from the html when I exit the editor.

I wanted to create pages with annotated poems for an English class, where they can hover or click on a highlighted word to see a tooltip explaining it. I know how to do it with pseudo-classes, but can't use those in inline css. I know how to do it with a mouseover event, but that's js so gets deleted.

Is this impossible within the restrictions I have described?

Thanks very much for the reminder about the details tag. I have used them before but didn't think of it for this use case. I have it pretty much working now, except that the canvas app insists on including the little arrow icon next to the word. Works fine in a browser though, so pretty happy with it as a solution. — HapaxHypatia
– HapaxHypatia, Commented Jun 12 at 5:30
Since you can use inline css, <summary style="list-style:none"> might help with the arrow next to the word. relevant question — admcfajn
– admcfajn, Commented Jun 12 at 18:54
Oh yes, I've already done that. Works in a browser, not in the app. But it's not a dealbreaker, it still all functions fine. — HapaxHypatia
– HapaxHypatia, Commented Jun 12 at 23:16

AMINE LAKHDER · Accepted Answer · 2025-06-12 00:56:49Z

0

I am not very familiar with Canvas LMS but based on your description it sounds like they restrict JavaScript for security reasons. as you mentioned CSS pseudo-classes and browser events would normally help in this case but it seems those are not possible given the limitations.

One suggestion I can offer is to use the title attribute for the words you want to display the tooltip for. It is a basic solution with limited styling through inline CSS but it does show a tooltip on hover and might still be useful.

Good luck!

answered Jun 12 at 0:56

AMINE LAKHDER

1

Sign up to request clarification or add additional context in comments.

1 Comment

HapaxHypatia Jun 12 at 5:27

Thanks, I did think of using title, but yes, it doesn't really allow any styling at all, and it will appear right over the word, where I would prefer it to be over to the side. But it's a solid back up plan.

zer00ne · Accepted Answer · 2025-06-12 08:11:55Z

Use <a>nchor tags by matching href="#id" to another <a>nchor with the matching #id.


// Anywhere on your page or site.
<a id="X" href="#Z">X to Z</a>

// Anywhere on your page or site.
<a id="#Z" href="#X">Z to X</a>

/*
|| Each anchor is the destination for the other and vice versa.
*/

If your platform allows you to add styles to <html> element, add the following styles to it for smooth animated scrolling:


<html style="overflow: scroll; scroll-behavior: smooth"></html>

<div style="overflow-y: scroll; scroll-behavior: smooth">
  <div style="width: fit-content; max-width: 90%; min-height: 100vh; margin: 2rem auto; padding: 0.75rem 0.5rem 1.5rem; background-image: radial-gradient(ellipse farthest-corner at 45px 45px, rgba(238, 226, 141, 0.6) 0%, rgba(187, 177, 110, 0.4) ); box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;">
    <h1 style="font-size: 1.75rem; line-height: 1.2; font-family: Georgia; text-align: center; color: #500">The Raven</h1>

    <div style="padding-inline: 1.75rem; font-size: 1rem; line-height: 1.5; font-family: Palatino; color: #333">
      <p><a id="a1" href="#A1"><mark>Once upon a midnight dreary</mark>
    <sup style="position: relative; top: calc(-0.83em + 3.32px); font-size: calc(0.5em + 4px); vertical-align: baseline;">1</sup></a>, while I pondered, <a id="a2" href="#A2"><mark>weak and weary</mark>
    <sup style="position: relative; top: calc(-0.83em + 3.32px); font-size: calc(0.5em + 4px); vertical-align: baseline;">2</sup></a>,<br>
Over many a quaint and curious volume of forgotten lore,<br>
While I nodded, nearly napping, suddenly there came a tapping,<br>
As of some one gently rapping, rapping at my chamber door. “<br>
“'Tis some visitor,” I muttered, “tapping at my chamber door—<br>
Only this, and nothing more.”</p>
      <p>Ah, distinctly I remember it was in the bleak December,<br>
And each separate dying ember wrought its ghost upon the floor.<br>
Eagerly I wished the morrow;—vainly I had sought to borrow<br>
From my books surcease of sorrow—sorrow for the lost Lenore—<br>
For the rare and radiant maiden whom the angels name Lenore—<br>
Nameless here for evermore.
      <p>
        <i style="display: block; font-size: 1.5rem; text-align: center;">🙓</i>
    </div>
  </div>

  <div style="width: fit-content; max-width: 70%; min-height: 100vh; margin: 2rem auto; padding: 0.75rem 0.5rem 0.75rem; background-image: radial-gradient(ellipse farthest-corner at 45px 45px, rgba(238, 226, 141, 0.6) 0%, rgba(187, 177, 110, 0.4) ); box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;">
    <h1 style="font-size: 1.75rem; line-height: 1.2; font-family: Georgia; text-align: center">Footnotes</h1>
    <div style="padding-left: 1.25rem; font-size: 1rem; line-height: 1.5; font-family: Palatino;">
      <blockquote id="A1" style="padding: 1rem 2rem; background: rgba(0, 0, 0, 0.3); box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;">
        <sup style="position: relative; top: calc(-0.83em + 3.32px); left: -3ch; font-size: calc(0.5em + 4px); vertical-align: baseline;">
 <a href="#a1" style="width: 1rem; font-weight: 700;">1</a></sup><q style="font-style: italics">Poe begins his poem by playing with an opening well known in fairytales and folklore, 
"Once upon a time." This situates his story in the fantastical world of fairytales, but 
also establishes the dark and ominous setting of "dreary midnight."</q>
        <cite style="display: flex; justify-content: flex-end">
       <a href="https://www.owleyes.org/text/raven/read/the-raven#:~:Once%20upon%20a" target="_blank" rel="noreferrer">— Caitlin, Owl Eyes Staff</a>
        </cite>
      </blockquote>

      <blockquote id="A2" style="padding: 1rem 2rem; background: rgba(0, 0, 0, 0.3); box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;">
        <sup style="position: relative; top: calc(-0.83em + 3.32px); left: -3ch; font-size: calc(0.5em + 4px); vertical-align: baseline;">
    <a href="#a2" style="width: 1rem; font-weight: 700;">2</a></sup><q style="font-style: italics">This is the first example of Poe’s 
frequent use of alliteration, the repetition of initial sounds, and internal rhyme. Notice how Poe uses 
internal rhyme throughout the first and third lines of each stanza, and particularly how repetition 
represents an essential technique and theme in the poem.</q>
        <cite style="display: flex; justify-content: flex-end">
       <a href="https://www.owleyes.org/text/raven/read/the-raven#:~:weak%20and%20weary" target="_blank" rel="noreferrer">— Wesley, Owl Eyes Editor</a>
    </cite>
      </blockquote>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Tooltips: html and inline css only, no js

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related