Implement tooltips/clarifications.

[mtyaka]

The idea is based on capa <clarification> nodes: https://github.com/edx/edx-platform/pull/6679

I decided to go with <span class="pb-clarification> instead of a custom <clarification> node because supporting clarifications inside the html child block was a requirement, but the html block is defined inside edx-platform and we aren't able to preprocess the contents of the html block from within problem-builder.

Even if we were able to get a patch for html block to support <clarification> elements upstream, I wouldn't feel very comfortable with that idea since the html block is supposed to contain plain html and making it recognize and preprocess custom elements wouldn't feel right.

The best way to implement this would probably be custom DOM elements (document.registerElement),
but browser support is not there yet and there are no reliable polyfills.

This code uses JS to process <span class="pb-clarification"> elements and transform them into the same HTML structure that's used by capa <clarification> tooltips. It relies on the LMS/Studio JS code to handle mouseovers/clicks on the tooltips, which means the tooltips don't work quite correctly in the workbench - if workbench support is required, we could copy the tooltip JS code and styles from edx-platform.

To test this, use <span class="pb-clarification">My clarification</span> inside a question of any problem type. Clarifications are also supported in MCQ/MRQ choices.

[bradenmacdonald]

Can this be combined with mentoring.css ? Mentoring.css should really be renamed to problem_builder.css since it applies to the block as a whole. This would be a good opportunity to do so, and would reduce the number of separate CSS/JS files we are sending to the browser.

Also nit: missing newline at EOF

[mtyaka]

@bradenmacdonald That's a good idea, I moved the CSS rules into mentoring.css and renamed it to problem_builder.css.

[bradenmacdonald]

@mtyaka This looks great. I wasn't able to think of a better approach than what you've done here. I've left some minor notes and a request for you to add a test with an HTML block. If you add that test I'll give you thumbs up; the rest of my notes are optional/nits.

Here's a screenshot of some tests I just did:

One final question: When I edit an HTML block, it doesn't look so great because the <span> element has no special styling. The screenshot below is the WYSIWYG editor for the first block in the above screenshot. Did you look if there's any way to fix that?

[mtyaka]

Thanks @bradenmacdonald! I addressed most of your comments. I also added a CSS file that gets included in the HTML editor to make the clarifications in the editor stand out a bit. Making the tooltips work inside the HTML editor would be a lot of work, so this only tweaks the style of <span class="pb-clarification"> elements s bit.

Do you want to take another look?

[bradenmacdonald]

( 👍 )