wordpress-develop icon indicating copy to clipboard operation
wordpress-develop copied to clipboard

Customizer: Add tooltips to responsive preview icons for improved usability

Open himanshupathak95 opened this issue 7 months ago • 3 comments

Trac ticket: https://core.trac.wordpress.org/ticket/36447

This PR adds tooltip functionality to the responsive preview icons in the WordPress Customizer. By displaying tooltips on hover, users can now clearly identify the purpose of each device preview button before clicking them, enhancing usability and accessibility.

The implementation:

  • Uses aria-label attributes for tooltip content, which maintains accessibility
  • Follows UI patterns similar to tooltip implementations elsewhere in the admin

Before

https://github.com/user-attachments/assets/432bf2ec-3779-4e9e-ba77-cdbd2e77f04a

After

https://github.com/user-attachments/assets/45085d9d-05a8-4eb9-90f8-0525a135d1e4

himanshupathak95 avatar Mar 26 '25 07:03 himanshupathak95