Here is a clear way to describe the feature enhancement so the Plate.js maintainers understand exactly what you mean:
Problem
In the Plate.js editor toolbar, the tooltip behavior appears to be inconsistent across toolbar buttons. When hovering over or interacting with the Emoji button, its tooltip/name (Emoji) is displayed directly above the button. However, the next four toolbar icons to the right do not display their respective names or tooltips when hovered over.
This makes it difficult for users to understand the purpose of these toolbar buttons, especially for icons that may not be immediately recognizable.
Solution
Add consistent tooltip support to all toolbar buttons that currently do not display their names when hovered over.
Each toolbar button should display a tooltip containing a clear and descriptive name when the user hovers over it, similar to the existing behavior of the Emoji button.
For example, hovering over each of the four buttons following the Emoji button should display its corresponding action/name above or near the button.
Alternatives
An alternative would be to add accessible labels (aria-label) to the buttons without displaying visible tooltips. However, visible tooltips would provide a better user experience by allowing users to quickly identify the purpose of unfamiliar toolbar icons.
Another option would be to display the tooltip only after a short hover delay, which could prevent tooltips from appearing too frequently when users move across the toolbar.
Context
The screenshot attached shows the inconsistent behavior. The Emoji button displays an Emoji tooltip above the button in the first attache screenshot below, while the four toolbar buttons immediately to its right do not display any tooltip or name when hovered over as seen in the second screenhsot below.
The goal is to make the toolbar's tooltip behavior consistent across all toolbar buttons and improve discoverability and usability, particularly for users who may not immediately recognize the meaning of an icon.
Here is a clear way to describe the feature enhancement so the Plate.js maintainers understand exactly what you mean:
Problem
In the Plate.js editor toolbar, the tooltip behavior appears to be inconsistent across toolbar buttons. When hovering over or interacting with the Emoji button, its tooltip/name (
Emoji) is displayed directly above the button. However, the next four toolbar icons to the right do not display their respective names or tooltips when hovered over.This makes it difficult for users to understand the purpose of these toolbar buttons, especially for icons that may not be immediately recognizable.
Solution
Add consistent tooltip support to all toolbar buttons that currently do not display their names when hovered over.
Each toolbar button should display a tooltip containing a clear and descriptive name when the user hovers over it, similar to the existing behavior of the Emoji button.
For example, hovering over each of the four buttons following the Emoji button should display its corresponding action/name above or near the button.
Alternatives
An alternative would be to add accessible labels (
aria-label) to the buttons without displaying visible tooltips. However, visible tooltips would provide a better user experience by allowing users to quickly identify the purpose of unfamiliar toolbar icons.Another option would be to display the tooltip only after a short hover delay, which could prevent tooltips from appearing too frequently when users move across the toolbar.
Context
The screenshot attached shows the inconsistent behavior. The Emoji button displays an
Emojitooltip above the button in the first attache screenshot below, while the four toolbar buttons immediately to its right do not display any tooltip or name when hovered over as seen in the second screenhsot below.The goal is to make the toolbar's tooltip behavior consistent across all toolbar buttons and improve discoverability and usability, particularly for users who may not immediately recognize the meaning of an icon.