calcite-design-system
calcite-design-system copied to clipboard
Tooltip: adjust default padding across `scale` property and `pointerDisabled` with the ability to disable the pointer
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.
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 ?
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.
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.
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.
+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.
To confirm from design, we plan to maintain the font size and reduce the default padding across the board, correct? @ashetland @SkyeSeitz
Correct
Updated designs posted above.
cc @geospatialem, @brittneytewks