[MGNLUI-8538] Styling of tooltips Created: 22/Nov/23  Updated: 18/Dec/23  Resolved: 18/Dec/23

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: 6.3.0

Type: Task Priority: Low
Reporter: Laura Delnevo Assignee: Lam Nguyen Bao
Resolution: Done Votes: 0
Labels: searchx
Remaining Estimate: Not Specified
Time Spent: 1d 2.5h
Original Estimate: Not Specified

Attachments: PNG File Screenshot 2023-11-22 at 10.36.07.png     JPEG File Tooltip-i13.jpg     JPEG File screen mockup - i13.jpg    
Issue Links:
Cloners
clones MGNLUI-8481 Implement tooltips for the Action Bar Closed
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Documentation update required:
Yes
Epic Link: SearchX 1. In-App search & Top Nav
Work Started:

 Description   

We need some styling refinements of the tooltips, following their implementation with MGNLUI-8481

Action bar hovering behaviour:

  • Button turns lighter (dark-grey-hover)
  • And if action bar is collapsed tooltip shows up

ACs

  • The tooltip margins, font size and positioning need adjusting (please follow design details below)

 

Action bar tooltip

— Rectangle style —
Light-grey colour
4px rounded corners

— Text style (Label) —
Roboto regular
12pt size
16pt line height
-0.3px letter spacing

— Text padding —
8px horizontal padding
4px vertical padding

— Positioning (tooltip in relation to focus area) —
For the action bar buttons use RHS tooltip
Centred vertically
8px horizontal padding (shape overlay)

 

Design note: The only thing that changes in the tooltip is the positioning, and this will vary depending on the area in focus, but always following the same logic of shape overlay and alignment with 8px increment.


Generated at Mon Feb 12 09:56:05 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.