Hi @bhaveshraja, I'm tidying up the tooltip (the little hint bubble that pops up when you hover or focus something) in our kit and want to settle the defaults with you.
For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent), or whether it should be adjustable depending on where it's used?
-
The bubble look. The hint sits in a small bubble with a soft border, our light layer-2 fill, rounded corners, and a gentle shadow. Should that look always be the same for every tooltip?
-
The text inside. The text is small (our caption size) in the primary text colour, with a bit of padding around it. Should that size, colour, and padding always hold?
-
The little arrow. The bubble points at what it describes with a small arrow. Should every tooltip carry that arrow, or are there cases where it should be hidden?
-
Where it shows up and how close. In the examples it appears above the thing it describes, sitting a small gap (8px) away. Should "above by default" be the standard, with the same gap, or do you want it to flip to other sides depending on space?
-
How fast it opens and closes. When tooltips are grouped, moving from one to the next shows the next one instantly. Should that quick hand-off be the standard feel?
Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!
Hi @bhaveshraja, I'm tidying up the tooltip (the little hint bubble that pops up when you hover or focus something) in our kit and want to settle the defaults with you.
For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent), or whether it should be adjustable depending on where it's used?
The bubble look. The hint sits in a small bubble with a soft border, our light layer-2 fill, rounded corners, and a gentle shadow. Should that look always be the same for every tooltip?
The text inside. The text is small (our caption size) in the primary text colour, with a bit of padding around it. Should that size, colour, and padding always hold?
The little arrow. The bubble points at what it describes with a small arrow. Should every tooltip carry that arrow, or are there cases where it should be hidden?
Where it shows up and how close. In the examples it appears above the thing it describes, sitting a small gap (8px) away. Should "above by default" be the standard, with the same gap, or do you want it to flip to other sides depending on space?
How fast it opens and closes. When tooltips are grouped, moving from one to the next shows the next one instantly. Should that quick hand-off be the standard feel?
Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!