calcite-design-system icon indicating copy to clipboard operation
calcite-design-system copied to clipboard

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

Open COV-GIS opened this issue 2 years ago • 6 comments

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.

COV-GIS avatar Sep 16 '22 16:09 COV-GIS

It does seem like we could offer scale property here to control the padding, and set a default font size. Currently you can add a custom declaration to adjust the font size of slotted content.

We expose disable-pointer on calcite-popover, that also seems like a reasonable addition to tooltip.

Thoughts cc @asangma @ashetland ?

macandcheese avatar Sep 16 '22 16:09 macandcheese

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. CleanShot 2022-09-20 at 09 02 25@2x

ashetland avatar Sep 20 '22 16:09 ashetland

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.

macandcheese avatar Sep 20 '22 16:09 macandcheese

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. CleanShot 2022-09-22 at 14 22 31@2x

ashetland avatar Sep 22 '22 21:09 ashetland

+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.

jul11557 avatar Feb 13 '24 16:02 jul11557

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

macandcheese avatar Feb 20 '24 21:02 macandcheese

Correct

ashetland avatar Feb 20 '24 21:02 ashetland

Updated designs posted above.

ashetland avatar Apr 29 '24 17:04 ashetland

cc @geospatialem, @brittneytewks

github-actions[bot] avatar Apr 29 '24 17:04 github-actions[bot]