Tooltip: adjust default padding across scale property and pointerDisabled with the ability to disable the pointer

[COV-GIS]

Description

Tooltip with half the padding and possibly slightly smaller font size.

Acceptance Criteria

Add boolean compact (or similar) property to accomplish the above.

Also...possibly a property to disable the arrow element. When combined with compact, toolitp would be more like a native browser title.

Relevant Info

No response

Which Component

tooltip

Example Use Case

For actions in bars or pads or in header slots the tooltip size is fine as is. But seems too big and overwhelming in content with lots of controls and such, especially when using small scale components.

A smaller tooltip without an arrow might also be able to replace native expand/collapse titles for blocks and accordions, and other similar situations. I don't know if that would create an accessibility issue or not. A mix of tooltips and native titles seems visually odd in my personal opinion.

Calcite design solution

Figma file available and includes:

• Added scales
• Reduced padding on medium scale when compared to current Tooltip
• Added pointer-disabled property

[ashetland]

A compact version of tooltip makes a lot of sense. I'd suggest disable-pointer could always be an option, not just on the compact version. The font size is already at 12, the standard for scale="s". Here's a quick mock with padding reduced to 8, 4px. Not sure the 10px font size is big enough.

[macandcheese]

Yes, disable-pointer shouldn't be limited to a single scale. I think using the s, m, l scale instead of default / compact makes sense. We use 10px on s input-message, so maybe worth evaluating that as well.

[ashetland]

Agree on a full scale set of s, m, l. Here's a Chrome tip with our 10px-font tooltip overlaid. Might be worth going to 11px to increase readability.

[jul11557]

+1 on this for ArcGIS Mission. We have no issues with the font size at 12, but would appreciate the option for smaller padding so that the tooltip doesn't block other UI elements.

[macandcheese]

To confirm from design, we plan to maintain the font size and reduce the default padding across the board, correct? @ashetland @SkyeSeitz

[ashetland]

Correct

[ashetland]

Updated designs posted in the issue description.

[github-actions]

cc @geospatialem, @brittneytewks