Add setting for tooltip trigger

amd/src/tooltip.js

@@ -33,10 +33,15 @@ export const init = () => {
         if (input.dataset.qtypeFormulasEnableTooltip !== 'true') {
             continue;
         }
-        input.addEventListener('focus', focused);
-        input.addEventListener('mouseover', mouseOver);
-        input.addEventListener('mouseout', mouseOut);
-        input.addEventListener('blur', lostFocus);
+        let trigger = input.dataset.qtypeFormulasTooltipTrigger;
+        if (trigger.includes('hover')) {
+            input.addEventListener('mouseover', mouseOver);
+            input.addEventListener('mouseout', mouseOut);
+        }
+        if (trigger.includes('focus')) {
+            input.addEventListener('focus', focused);
+            input.addEventListener('blur', lostFocus);
+        }
     }
 
     // When the user presses the Escape key anywhere, the tooltips should be removed in order to follow

lang/en/qtype_formulas.php

@@ -340,6 +340,8 @@
 $string['settinglenientimport_desc'] = 'When importing a question, do not check whether the provided model answers would receive full marks. <br>Note: You should only activate this setting temporarily.';
 $string['settings_heading_general'] = 'General preferences';
 $string['settings_heading_general_desc'] = '';
+$string['settings_heading_tooltip'] = 'Tooltips';
+$string['settings_heading_tooltip_desc'] = '';
 $string['settings_heading_width'] = 'Default widths';
 $string['settings_heading_width_desc'] = 'Default width of input fields for the various answer types. For fields that are left empty, the settings from the plugin\'s style file will be used. Please use this settings carefully. Making the fields too small can make it difficult for your students to type their answer. Note that the exclamation mark icon shown for invalid answers takes up approximately 12 pixels.';
 $string['settingshownumbertooltip'] = 'Show "Number" tooltip';
@@ -354,6 +356,11 @@
 
 All missing fields are automatically appended at the end of the part\'s text. A special case is that if <tt>{_0}</tt> and <tt>{_u}</tt> are specified consecutively with no space,
 and there is only one answer field and unit, i. e. <tt>{_0}{_u}</tt>, they will be combined into a single long input answer field for both answer and unit.';
+$string['tooltiptrigger'] = 'Trigger';
+$string['tooltiptrigger_desc'] = 'On what occasions the tooltips should be shown.';
+$string['triggerboth'] = 'Focus or mouse hover';
+$string['triggerdisabled'] = 'No tooltips';
+$string['triggerhover'] = 'Mouse hover only';
 $string['uniquecorrectansweris'] = 'The correct answer is: {$a}';
 $string['unit'] = 'Unit';
 $string['unitpenalty'] = 'Deduction for wrong unit (0-1)*';

renderer.php

@@ -657,6 +657,7 @@ protected function create_input_box(
         $shownumbertooltip = get_config('qtype_formulas', 'shownumbertooltip');
         $inputattributes += [
             'data-qtype-formulas-enable-tooltip' => (!$isnumber || $shownumbertooltip ? 'true' : 'false'),
+            'data-qtype-formulas-tooltip-trigger' => get_config('qtype_formulas', 'tooltiptrigger'),
         ];
 
         if ($displayoptions->readonly) {

settings.php

@@ -39,14 +39,6 @@
         0
     ));
 
-    // Whether the tooltip for answer type "Number" should be shown.
-    $settings->add(new admin_setting_configcheckbox(
-        'qtype_formulas/shownumbertooltip',
-        new lang_string('settingshownumbertooltip', 'qtype_formulas'),
-        new lang_string('settingshownumbertooltip_desc', 'qtype_formulas'),
-        1
-    ));
-
     // Default delay for the on-the-fly validation's debounce timer.
     $settings->add(new admin_setting_configselect(
         'qtype_formulas/debouncedelay',
@@ -106,6 +98,33 @@
         4
     ));
 
+    $settings->add(new admin_setting_heading(
+        'qtype_formulas/tooltip',
+        new lang_string('settings_heading_tooltip', 'qtype_formulas'),
+        new lang_string('settings_heading_tooltip_desc', 'qtype_formulas'),
+    ));
+
+    // Tooltip trigger.
+    $settings->add(new admin_setting_configselect(
+        'qtype_formulas/tooltiptrigger',
+        new lang_string('tooltiptrigger', 'qtype_formulas'),
+        new lang_string('tooltiptrigger_desc', 'qtype_formulas'),
+        'hover',
+        [
+            'hover,focus' => new lang_string('triggerboth', 'qtype_formulas'),
+            'hover' => new lang_string('triggerhover', 'qtype_formulas'),
+            '' => new lang_string('triggerdisabled', 'qtype_formulas'),
+        ]
+    ));
+
+    // Whether the tooltip for answer type "Number" should be shown.
+    $settings->add(new admin_setting_configcheckbox(
+        'qtype_formulas/shownumbertooltip',
+        new lang_string('settingshownumbertooltip', 'qtype_formulas'),
+        new lang_string('settingshownumbertooltip_desc', 'qtype_formulas'),
+        1
+    ));
+
     $settings->add(new admin_setting_heading(
         'qtype_formulas/defaultwidths',
         new lang_string('settings_heading_width', 'qtype_formulas'),

tests/behat/tooltips.feature

@@ -44,6 +44,8 @@ Feature: Display of tooltips
     And quiz "Quiz 5" contains the following questions:
       | question  | page |
       | twoandtwo | 1    |
+    And the following config values are set as admin:
+      | tooltiptrigger | hover,focus | qtype_formulas |
     And I log in as "student"
     And I am on "Course 1" course homepage
 
@@ -139,3 +141,21 @@ Feature: Display of tooltips
     And I press the escape key
     Then I should not see "Number and unit"
     And "" "qtype_formulas > tooltip" should not be visible
+
+  Scenario: Tooltip is not shown on focus, if set to hover only
+    When the following config values are set as admin:
+      | tooltiptrigger | hover | qtype_formulas |
+    And I follow "Quiz 3"
+    And I press "Attempt quiz"
+    And I set the field "Answer" to "5 m/s"
+    Then I should not see "Number and unit"
+    And "" "qtype_formulas > tooltip" should not be visible
+
+  Scenario: Tooltip is not shown on focus, if disabled
+    When the following config values are set as admin:
+      | tooltiptrigger |  | qtype_formulas |
+    And I follow "Quiz 3"
+    And I press "Attempt quiz"
+    And I set the field "Answer" to "5 m/s"
+    Then I should not see "Number and unit"
+    And "" "qtype_formulas > tooltip" should not be visible

tests/renderer_test.php

@@ -813,7 +813,7 @@ public function test_render_mce_accessibility_labels(): void {
         );
     }
 
-    public function test_textbox_tooltip_title(): void {
+    public function test_textbox_tooltip_enable(): void {
         // Create a simple test question. First, 'shownumbertooltip' is enabled. Then we disable the option.
         // This should only have an effect for the number type.
         $q = $this->get_test_formulas_question('testsinglenum');
@@ -864,6 +864,31 @@ public function test_textbox_tooltip_title(): void {
         );
     }
 
+    public function test_textbox_tooltip_trigger(): void {
+        // Create a simple test question. Check the data-qtype-formulas-tooltip-trigger attribute is set
+        // correctly. The default value is 'hover'.
+        $q = $this->get_test_formulas_question('testsinglenum');
+        $this->start_attempt_at_question($q, 'immediatefeedback', 1);
+        $this->check_current_output(
+            new \question_contains_tag_with_attribute('input', 'data-qtype-formulas-tooltip-trigger', 'hover'),
+        );
+        set_config('tooltiptrigger', 'hover,focus', 'qtype_formulas');
+        $this->start_attempt_at_question($q, 'immediatefeedback', 1);
+        $this->check_current_output(
+            new \question_contains_tag_with_attribute('input', 'data-qtype-formulas-tooltip-trigger', 'hover,focus'),
+        );
+        set_config('tooltiptrigger', '', 'qtype_formulas');
+        $this->start_attempt_at_question($q, 'immediatefeedback', 1);
+        $this->check_current_output(
+            new \question_contains_tag_with_attribute('input', 'data-qtype-formulas-tooltip-trigger', ''),
+        );
+        set_config('tooltiptrigger', 'hover', 'qtype_formulas');
+        $this->start_attempt_at_question($q, 'immediatefeedback', 1);
+        $this->check_current_output(
+            new \question_contains_tag_with_attribute('input', 'data-qtype-formulas-tooltip-trigger', 'hover'),
+        );
+    }
+
     public function test_render_mc_accessibility_labels(): void {
         // Create a single part multiple choice (radio) question.
         $q = $this->get_test_formulas_question('testmc');