[wp-trac] [WordPress Trac] #51006: Add a mechanism for accessible tooltips in core

[WordPress Trac]

#51006: Add a mechanism for accessible tooltips in core
-------------------------------------+-------------------------------------
 Reporter:  joedolson                |       Owner:  joedolson
     Type:  enhancement              |      Status:  accepted
 Priority:  normal                   |   Milestone:  6.7
Component:  General                  |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  tooltips 2nd-opinion     |     Focuses:  ui, accessibility,
  has-patch                          |  javascript
-------------------------------------+-------------------------------------

Comment (by rajinsharwar):

 As an update here's what I have done to the current tooltips.
 1. Added on-hover toggle instead of on-click.
 2. The toggle can be focused with the Tab key, and also unfocused with
 Escape.
 3. The toggle is also clickable for mobile devices.
 4. From the PHP function, we can now pass the $default_position, in which
 position we want the tooltip by default. Accepted values, "top", "bottom",
 "right", and "left", and default value as right.
 5. The tooltip's popup will not adjust its position automatically based on
 screen size. For example, if the default is left, and there is space on
 the left, the tooltip automatically changes its position to the right.
 6. If the same tooltip-id is being used to render the tooltip for
 duplicate elements, the tooltips still function without conflicts. ( As
 far as I have tested. If I have missed any, feel free to share ).
 7. As each tooltip has individual IDs, extenders, or even in the core,
 appropriate IDs can be targeted to apply/override the styles.

 Example usage:
 {{{#!php
 <?php add_tooltip('tooltip-2', 'This is a Text for the Tooltip', 'Help',
 'left'); ?>
 }}}

 {{{#!php
 <?php add_tooltip('tooltip-3', 'This is another top Text for the Tooltip',
 'Helpme', 'top'); ?>
 }}}

 **I do have a nerdy question**, I am wondering what's the correct way to
 add new JS files in the core? Like, I have added in the Grunt build file
 and in the script loader. Still, after running dev:build, the .js file
 from the ''src\js\_enqueues\wp\wp-tooltip.js'' is not coming in the ''src
 \wp-includes\js\wp-tooltip.js''. Not sure if I did this wrong or how
 should I do it correctly.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/51006#comment:41>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform