Context
Implementation steps for the tooltips. After discussing some options on how we implement this best there seems to be an option we want to go for that should work for what's needed.
Implementation details
- Use the OO.ui.ProcessDialog class to implement the dialog. The base class should already provide the style we want
- Add the content from the mocks
- Add the pulsing blue dot and position it with CSS to the button
For design details see T394627: VE: Tool tips and onboarding flow for sub-referencing
- Use cookies / user options to store if the dialog was dismissed
- Open the details dialog when the user clicks "okay, got it"
To demo this more than once, you can paste the following lines into your JavaScript console to delete the user preference and cookie.
( new mw.Api() ).saveOption( 'userjs-cite-hide-subref-help', null ); localStorage.removeItem( 'mw-cite-hide-subref-help' );