Tooltips
See the Tooltip
component in Garden's @zendeskgarden/react-tooltips
package for the latest updates.
The
.c-tooltip
component classes are used to style various tooltip treatments. Combine with
.c-arrow
classes to connect a tooltip with the element it's informing.
Default
The default tooltip has a dark background and is intended to contain only one line of text.
Modifiers
Use the
.c-tooltip--light
modifier to style with a lighter background color.
The
.c-tooltip--medium
class provides affordance for tooltips that exceed one line, but are
still relatively short (max-width is 140px).
.c-tooltip--light
.c-tooltip--medium
.c-tooltip--medium
Use
.c-tooltip--large
for multi-line tooltips that are headed by a title (max-width is
270px). Both large and extra-large tooltips may contain
.c-tooltip__title and
.c-tooltip__paragraph child elements.
.c-tooltip__paragraph
Every day carry blog man bun, disrupt fap etsy street art +1
poutine twee. Plaid umami PBR&B etsy, narwhal ramps chillwave
bespoke butcher cronut. Taxidermy kale chips asymmetrical
cardigan, authentic normcore DIY chillwave.
.c-tooltip__paragraph
Every day carry blog man bun, disrupt fap etsy street art +1
poutine twee. Plaid umami PBR&B etsy, narwhal ramps chillwave
bespoke butcher cronut. Taxidermy kale chips asymmetrical
cardigan, authentic normcore DIY chillwave.
Apply the
.c-tooltip--extra-large
class when a tooltip contains multiple lines and element types
(max-width 460px).
Everyday carry blog man bun, disrupt fap etsy street art +1 poutine twee. Plaid umami PBR&B etsy, narwhal ramps chillwave bespoke butcher cronut. Taxidermy kale chips asymmetrical cardigan, authentic normcore DIY chillwave.
Flannel gluten-free slow-carb butcher actually. Polaroid irony celiac man braid, narwhal venmo iPhone 8-bit cronut cold-pressed keytar. Thundercats street art polaroid banjo mixtape. Humblebrag pickled quinoa occupy. Meggings craft beer organic tilde skateboard, cronut freegan normcore franzen farm-to-table cred ugh.