qtype_poasquestion css breaks core moodle tooltips

[Nathan Rosenquist]

qtype_poasquestion version: 2020050300

moodle version: 3.9.1 / 2020061501.00

‌

Hello, I have discovered that the “tooltip” css classes defined in question/type/poasquestion conflict with a css class of the same name in core moodle. As a result tooltips across the entire site (The ones that appear when you click the small info circle icon on many settings pages) do not display in their expected locations. Instead of appearing next to the the setting they are describing, they appear at the very bottom off the page, out of view. To replicate, go to any settings page in moodle that has info tooltips, such as the “edit settings” page for a quiz module. Click any info icon, and you should see the problem (You will likely have to scroll down to see the tooltip).

I have attempted to fix this myself, but there were too many places where tooltip CSS was defined in qtype_poasquestion. I figured it was best to just let the developer know!

[Oleg Sychev]

Надо переименовать css класс в poasquestion_tooltip - но проверить всех возможных клиентов в Preg и CorrectWriting

[Dmitry Mamontov]

Hello! Can you please attach screenshot of the issue. I was unable to install moodle 3.9.1 and used 3.9.2 instead, but it seems, tooltips are working fine:

Are we talking about those tooltips or other?

And maybe you’re using some specific moodle theme. Can you please point me at it, if so?

‌

[Eric Bryant]

We are having the same issue. Our institution is hosted with eThink and we are using the Moodle core Boost theme. Help tips are appearing below the footer.

[Oleg Sychev]

On which pages does it happen? Poasquestion hosts files used by different question types.

Is it authoring tools of Preg question type?

[Dmitry Mamontov]

Can you point us also:

• What plugins are installed on your version of Moodle?
• What version of Moodle are you using?
• In which of browser does the issue happen?
• Is the issue reproducing on a desktop device or mobile or tablet? What resolution are you using?

Sorry for asking so much questions, but the issue is getting hard to investigate, so it’s better to at least know how to properly reproduce it.

‌

[Eric Bryant]

This happens on most pages. Adding/editing activities/resources such as quizzes, assignments, forums.

• We have quite a few plugins added. I’ll have to get a list from our host. This is the first time we’ve experienced these issues in over 11-years as Moodle institution.
• Moodle 3.9.X
• Chrome Version 86.0.4240.183 (Official Build) (64-bit) & Firefox 82.02 (64-bit) in Window 10 Enterprise version 1809 build 17763.973 (64-bit)
• PC laptop i5 1920 x 1080

I’m happy to provide as much data as I can gather for you.

Thanks

Here’s an example of editing “Common module settings” for a Moodle Quiz.

‌

[Eric Bryant]

Here are our plugins beyond Moodle core…

‌

[Dmitry Mamontov]

Thank you!

Hm, I guess, the issue is in preg question type and I think, I found the culprit. The style.css for preg overrides built-in “.popover“ class: https://bitbucket.org/oasychev/moodle-plugins-preg/src/master/question/type/preg/styles.css . We need to ask Grigorii, why it being used here.

I’ve also replicated issue in my Moodle installation, using only preg and it’s dependencies. So, it’s really preg’s issue, not poasquestion.

[Dmitry Mamontov]

Grigorii says it’s probably Prokudin’s part.

[Alex Morris]

Hi,

I’m also having this issue, I’ve fixed it for now by removing the CSS for the popover class in question/type/preg/styles.css

[Dmitry Mamontov]

Alex, does everything works fine in preg for you after removal?

[Eric Bryant]

Any update?

[Dmitry Mamontov]

I’ll try give the fix earlier a proper test, but this can take long, since I have very little experience with preg question type.

[Alex Morris]

Alex, does everything works fine in preg for you after removal?

Not sure sorry. Our testers haven’t reported any problems with it but they may not have tested that part yet.

‌

[Dmitry Mamontov]

@Oleg Sychev I think, the only place Preg uses it is the authoring tools. How can I trigger authoring tools for Preg? How to work with those? The other places work fine though.

[Oleg Sychev]

@dmitry_mamontov

Preg authoring tools can be triggered by pressing “edit” icon (шестеренку) near the regular expression during question editing. You can also install “Regular expression constructor” block and use the link there to get authoring tools.

‌

I asked Prokudin to look into it, but he’s busy at the moment :(

[Dmitry Mamontov]

Hm, guess I found why the popover was changed. Due to authoring tools, popup should be on other popup, for authoring tools. But without this hack, help popup will be under common popup (but nevertheless positioned properly). I’ve made fix in https://bitbucket.org/dmitry_mamontov/moodle-plugins-preg-fixes-09.2020/commits/10c52a02b2d94e4ed80267d9ee431098fb98c917 and checked it won’t break help popups.

[Jesse Safran]

To anyone who needs to fix this in the short term and does not want to change code, or is hosted and cannot change their code, the following CSS change does basically the same thing as the patch from Dmitry that is linked above and can be put into most theme settings, for example into the Raw SCSS / theme_boost | scss setting in Boost:

.popover {
position: absolute !important;
z-index: 10010 !important;
}