No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Toggletip

Toggletips, similar to Tooltips, provide contextual support for users when needed. They are hidden by default, a UI trigger or text link are clicked to set them to their visible state. Toggletips, unlike tooltips, are persistent until a user takes action to dismiss them by clicking on the required “X” (close) trigger. Toggletips are capable of containing varying types of complex content including interactive components, buttons, and dropdowns.

When to use

  • Users need further context to understand or learn a topic
  • Links to supporting documentation or content are needed to provide
  • When an interactive element must be placed within the popover
  • When content needs to persist for consumption until the user dismisses it

When not to use

  • When only a primary label or an auxiliary clarification is needed to be displayed (see: Tooltip)
  • Do not house information critical to user’s task completion
  • Do not request required information from a user to complete a task or workflow

Content

Toggletips are able to house various types of content. Below is a potential list:

  • Buttons
  • Text links
  • Dropdowns
  • Selects
  • Images/gifs/videos
  • Various combinations of elements — ex: strings of text with buttons and an image

Theme

There are currently 2 themes available for the Toggletip.

  • Info
  • Error

Info

This is the default theme, usually used in forms to show more information.

Error

Tooltip with a red background.

Triggers

  • Toggletips display on
    • user click of UI trigger
    • pressing ENTER or SPACE on a keyboard while the trigger element has focus
  • Toggletips dismiss by:
    • user click of close icon (x) — optional
    • clicking outside of the popover container
    • pressing the ESC key

Usage

function onClose() {
  // code to execute when the toggletip is closed
}

return (
  <Toggletip
    content="Toggletip body"
    title="This is the title of the Toggletip"
    footer="Toggletip footer text"
    closeButton={true}
    onClose={onClose}
  >
    <IconButton name="question-circle" tooltip="IconButton containing a Toggletip" />
  </Toggletip>
);
NameDescriptionDefault
theme
The theme used to display the toggletip
"info""error"
-
title
The title to be displayed on the header
stringElement
-
closeButton
determine whether to show or not the close button *
boolean
-
onClose
Callback function to be called when the toggletip is closed
(() => void)
-
placement
The preferred placement of the toggletip
"auto""bottom""top""right""left""bottom-start""bottom-end""top-start"
-
content*
The text or component that houses the content of the toggleltip
ToggletipContent
-
footer
The text or component to be displayed on the toggletip's bottom
stringElement
-
children*
The UI control users interact with to display toggletips
Element
-
fitContent
Determine whether the toggletip should fit its content or not
boolean
-
show
Determine whether the toggletip should be shown or not
boolean
-
onOpen
Callback function to be called when the toggletip is opened
(() => void)
-