CSS Components / Tooltips

Tooltips

This component has been deprecated

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.

.c-tooltip.c-arrow.c-arrow--b
.c-tooltip.c-arrow.c-arrow--r
.c-tooltip.c-arrow.c-arrow--l
.c-tooltip.c-arrow.c-arrow--t

Modifiers

Use the .c-tooltip--light modifier to style with a lighter background color.

.c-tooltip.c-tooltip--light

The .c-tooltip--medium class provides affordance for tooltips that exceed one line, but are still relatively short (max-width is 140px).

.c-tooltip
.c-tooltip--light
.c-tooltip--medium
.c-tooltip
.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__title

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

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

BadgeTipster Title

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.

Playground