Research solution for popovers

[MisRob]

Summary

Currently, to achieve popover-like elements

• we use "popper.js": "1.16.1" under the hood of KTooltip
• some of the long-time-ago-forked Keen UI components utilize "tippy.js": "4.2.1"

These are quite old versions that blocked some refactoring and proved to be hard to upgrade. We need to either upgrade or replace by another library or native platform APIs, depending on when when we work on this. On that opportunity, it’d be ideal to move towards using a single solution.

This issue tracks current and future use-cases and their requirements, and collects related libraries and native platform APIs. Its goal is to research and decide on next steps.

Use-cases

• KTooltip
• KDropdownMenu
• Kolibri onboarding flow https://github.com/learningequality/kolibri/issues/12103

Requirements

The following are must-haves directly motivated by our use-cases.

• Satisfies our browserlist
• a11y-first
• Performant
• Can be teleported to a chosen element
  • For integration with KOverlay
  • Rather than automatically attached to body which is said to have severe performance issues
• Integrates well with Vue Composition API
  • Composition API used widely in the codebase
  • Not being able to integrate the current libraries with the Composition API easily blocked some work in https://github.com/learningequality/kolibri-design-system/pull/583
• Not limited to plain text only, can receive rich HTML content via slot or similar
  • To support Kolibri onboarding flow (Slack thread)
  • Crucial requirement for scalability
• Can adjust its size and position cleverly
  • For example when rendered close to page’s edges

Related

• @AlexVelezLl and @bjester discussed complications with tippy.js in KDropdownMenu: https://github.com/learningequality/kolibri-design-system/pull/583, https://github.com/learningequality/kolibri-design-system/issues/634 ( )
• @rtibbles mentioned problems with upgrading popper.js
• @LianaHarris360's work on the Kolibri's onboarding flow where she uses one of the newer popover libraries

Libraries

(not evaluated against the requirements yet)

• VueTippy
• Floating Vue
• Floating UI (previously Popper)
• …?

Native APIs

• Popover API
  • As of Aug 2024 doesn’t satisfy the browserlist
  • https://github.com/oddbird/popover-polyfill is available, however has a long list of “Caveats”

[LianaHarris360]

Current Kolibri Browser Support List:

• 'Android > 4.4.3',
• 'Chrome >= 49',
• 'ChromeAndroid >= 49',
• 'Edge >= 18',
• 'Firefox >= 52',
• 'FirefoxAndroid >= 68',
• 'iOS >= 9.3',
• 'Opera >= 67',
• 'QQAndroid >= 10.4',
• 'Safari >= 11.1',
• 'Samsung >= 4',
• 'UCAndroid >= 12.12',

Floating-UI Browser Support List:

• Chrome >= 73
• Firefox >= 78
• Edge >= 79
• Safari >= 12.0
• iOS >= 12.0
• Opera >= 53

Floating-vue (powered by Floating-UI) Browser Support List:

This package has been renamed from v-tooltip to floating-vue and now uses floating-ui instead of popperjs.

• Chrome >= 73
• Firefox >= 78
• Edge >= 79
• Safari >= 12.0
• iOS >= 12.0
• Opera >= 53

VueTippy (powered by Tippy.js) Browser Support List:

This package is a Vue.js 3 wrapper for Tippy.js All modern browsers are supported. Proxy mobile browsers like Opera Mini are not supported.

• Integrates well with Vue Composition API
• Not limited to plain text only, can receive rich HTML content via slot or similar

[MisRob]

Thank you @LianaHarris360, very helpful.

[MisRob]

Leaving a note here from the meeting with @LianaHarris360 @marcellamaki @AlexVelezLl regarding on of the use-cases (Kolibri onboarding tutorial) that could be eventually related to this broader issue: Regarding the browsers support, we may go with the progressive enhancement approach for some features or compromise some of the other requirements. More to come as we keep exploring this area in the upcoming months :)