Uploaded image for project: 'Moodle app'
  1. Moodle app
  2. MOBILE-4593

Support Bootstrap popovers and tooltips

XMLWordPrintable

    • Hide

      Test on both iOS and Android.

      1. On site 4.4 dev test course you'll find a section named BS tooltips and popovers.
      2. Try to click all the buttons, boxes and links there, they will show on popup (also the disabled button one).
      3. Check they are all shown and you can read the complete text.
      4. Now On the Quiz section > Quiz: Deferred with CBM > Review an attempt.
      5. Check you can see a small blue help icon new text ...QBC... It should open a popover and you should read the text.
      6. Now on Quiz with ALL core question types review an attempt.
      7. Scroll to the cloze question 9 (Match the following cities with the correct state).
      8. Check San Francisco and The capital of France is have checkbox with also popovers.
      9. Repeat steps 4 to 8 in the master site.

      Note the popover may be repositioned after rendering to let the whole text be readable and scrolable.

      Show
      Test on both iOS and Android. On site 4.4 dev test course you'll find a section named BS tooltips and popovers. Try to click all the buttons, boxes and links there, they will show on popup (also the disabled button one). Check they are all shown and you can read the complete text. Now On the Quiz section > Quiz: Deferred with CBM > Review an attempt. Check you can see a small blue help icon new text ...QBC... It should open a popover and you should read the text. Now on Quiz with ALL core question types review an attempt. Scroll to the cloze question 9 (Match the following cities with the correct state). Check San Francisco and The capital of France is have checkbox with also popovers. Repeat steps 4 to 8 in the master site. Note the popover may be repositioned after rendering to let the whole text be readable and scrolable.
    • MOODLE_403_STABLE
    • Moodle Apps Sprint 2025-I1.4

      In quiz, we receive some help icons that use Bootstrap popovers to display the info in Moodle LMS (these popovers are used since Moodle 3.7, before they used a different system). We're hiding these icons, but it would probably be better to display them and make Bootstrap popovers work in the app (it can be useful for teachers too).

      This can be reproduced in "4.4 > [MoodleMobile Testing] > Quiz > Quiz: Deferred with CBM" with user u1, when reviewing the attempt.

      We aready have some code to support Boostrap tooltips (CoreDomUtils.handleBootstrapTooltips), popovers should be quite similar. 

      Example of the HTML code using popovers:

      Bootstrap 5:

      <a role="button" tabindex="0" class="feedbacktrigger btn btn-link" data-bs-toggle="popover" data-bs-container="body" data-bs-content="HTML CONTENT" data-bs-placement="right" data-bs-trigger="hover focus" data-bs-html="true" href="#">
          <i class="icon fa-regular fa-circle-check text-success fa-fw " title="Correct" role="img" aria-label="Correct"></i>
      </a>

      Bootstrap 4:

      <a class="btn btn-link p-0" role="button" data-container="body" data-toggle="popover" data-placement="right" data-content="HTML CONTENT" data-html="true" tabindex="0" data-trigger="focus" aria-label="Help">
        <i class="icon fa fa-question-circle text-info fa-fw " title="Help with CBM grades" role="img" aria-label="Help with CBM grades"></i>
      </a>

      As this is going to look quite similar in the app we will support bot popovers and tooltips in this issue.

            pferre22 Pau Ferrer
            dpalou Dani Palou
            Alfonso Salces Alfonso Salces
            Isabel Renedo Rouco Isabel Renedo Rouco
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 weeks, 3 days, 49 minutes
                4w 3d 49m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.