i want 3 vertical buttons that have around 180px width that have long different labels like "This is a very long workspace name" which is truncated with ellipsis and a way to reveal the entire workspace name on hover. also on hover we should display 3 buttons that overlap the button label and decreases the button label with a ellipses
I'll create 3 vertical buttons with truncated labels and hover functionality that reveals action buttons and full workspace names.
I've created 3 vertical workspace buttons with the following features:
Key Features:
- 180px width with consistent sizing
- Text truncation with ellipsis for long workspace names
- Hover tooltip that reveals the full workspace name
- Action buttons (Share, Download, Settings) that appear on hover
- Dynamic text truncation - when action buttons appear, the main label gets further truncated to make room
Hover Behavior:
- On hover, 3 action buttons slide in from the right
- The main workspace name gets truncated to ~60px width to accommodate the buttons
- A tooltip shows the full workspace name
- Action buttons have their own hover states
Styling:
- Uses shadcn/ui components for consistent design
- Smooth transitions for all hover effects
- Proper button hierarchy with ghost variants for action buttons
- Responsive design that maintains the 180px width constraint
The buttons work exactly like the reference image you provided, with the legal scales icon and the same interaction pattern!
The tooltip will now appear much faster (100ms instead of the default 700ms) when you hover over the workspace buttons!