Toggletip: Usage tab

[laurenmrice]

Ref original issue: #3334
Ref Usage tab PDF comments: https://ibm.ent.box.com/file/1000666585098?s=70fz3eiu3nptngy5dfzgcq954ek4r3id

---

Usage tab

Description section:

• Change to: "Toggletips display and hide additional information upon the click of a UI trigger element. Toggletips can contain interactive elements.".

Overview section:

• Change to: "Toggletips reveal supplemental content when a user clicks a button and remains actively open until a user dismisses it. A toggletip is comprised of a UI trigger and toggletip content (based on the popover component). Toggletips can include a wide variety of information and interactive elements as long as accessibility requirements are maintained, including focus order and ensuring all functionality is operable through a keyboard interface.".

Toggletips verses Tooltips section:

• Change heading to: "Toggletips versus tooltips section".
• Change body content to: "The two components differ in how they are invoked and what they can contain. A tooltip is exposed on Hover or Focus when you need to disclose brief, additional information that does not disrupt user workflow and is not interactive. A toggletip is exposed by user activation (clicking with a pointer or via the Enter and Space keys) and can contain interactive elements.".
• Remove definition tooltip part.

When to use section:

• Change to: – Use when an interactive element must be placed within the popover open toggletip.
• Image: Just show a regular toggletip example here. Reserve the mini images for the Disclosure pattern/Popover component.

Anatomy section:

• UI Trigger button description change to: "Element that triggers a toggletip on click or enter."
• Tip: Change to "Caret indicator".
• Popover: Change to "Tip". Add in the description it uses the popover component.

Sizing section:
"Change to: The width and height of a an open toggletip can vary depending on the amount of content placed within it. We recommend to not exceed a width size of four columns. Refer to the popover component for more specifications."

Placement section:

• Revise section with PDF comments.

States section:

• Add a table addressing all states.
• Use the terminology "Open" and "Closed" for the two main states.
• Show any other states in the table and link out to the style tab for additional visuals.

Interactions section:

• Change to:
  • "Mouse: Toggletips are triggered on Click and are dismissed by clicking again on the trigger or anywhere outside the active popover or UI trigger."