Summary
Add support for displaying contextual action buttons (e.g., edit, delete) when hovering over an annotation in the annotated text component.
Motivation
In many use cases (editor interfaces, annotation review tools, etc.), users need to quickly interact with individual annotations. Currently, there is no built-in way to trigger actions directly from the UI. Adding hover-based buttons would enhance usability and streamline editing workflows.
Example Use Cases
• Edit or delete annotations directly from the interface.
• Trigger custom actions (e.g., show metadata, open sidebar, copy annotation).
• Improve visual feedback when interacting with annotations.
Suggested Behavior
• On hovering over an annotation:
• Display a small floating container (e.g., top-right or inline-end) with action buttons.
• Action buttons can be customizable via slots, props, or config.
• Buttons should only appear on hover and not interfere with text selection or accessibility.
Implementation Notes
• The hover area should align with the annotation box.
• Use absolute positioning within the annotation span or a surrounding wrapper.
• Ensure accessibility (keyboard focus, screen reader support) is maintained.
• Allow consumers to configure:
• Which actions appear (via props/slots)
• Hover delay (optional)
• Button layout (horizontal/vertical)
Summary
Add support for displaying contextual action buttons (e.g., edit, delete) when hovering over an annotation in the annotated text component.
Motivation
In many use cases (editor interfaces, annotation review tools, etc.), users need to quickly interact with individual annotations. Currently, there is no built-in way to trigger actions directly from the UI. Adding hover-based buttons would enhance usability and streamline editing workflows.
Example Use Cases
• Edit or delete annotations directly from the interface.
• Trigger custom actions (e.g., show metadata, open sidebar, copy annotation).
• Improve visual feedback when interacting with annotations.
Suggested Behavior
• On hovering over an annotation:
• Display a small floating container (e.g., top-right or inline-end) with action buttons.
• Action buttons can be customizable via slots, props, or config.
• Buttons should only appear on hover and not interfere with text selection or accessibility.
Implementation Notes
• The hover area should align with the annotation box.
• Use absolute positioning within the annotation span or a surrounding wrapper.
• Ensure accessibility (keyboard focus, screen reader support) is maintained.
• Allow consumers to configure:
• Which actions appear (via props/slots)
• Hover delay (optional)
• Button layout (horizontal/vertical)