ToggleTip

[tay1orjones]

About

This component replaces the interactive use-case of the Tooltip component. Specifically, tooltips may no longer have interactive descendants. As a result, this component allows users to have interactive descendants in popovers using a disclosure pattern. This component toggles the visibility of the popover by clicking on the trigger.

Behavior

• The trigger for the toggletip receives focus
• The trigger toggles the visibility of the toggletip through:
  • Mouse click
  • Keyboard enter, space
• The toggletip may be dismissed on:
  • Keyboard Escape
  • Blur
  • Click away from toggletip or trigger
• Customizable icon?

Public API

We will deliver several components for Toggletip:

• Toggletip
• ToggletipLabel
• ToggletipButton
• ToggletipContent

Existing API

<Tooltip triggerText="..." renderIcon={...}>
  <p>Lorem ipsum</p>
  <div className="bx--tooltip__footer">
    <Link />
    <Button />
  </div>
</Tooltip>

Proposed API

<ToggletipLabel>Label</ToggletipLabel>
<Toggletip>
  <ToggletipButton>ICON</ToggletipButton>
  <ToggletipContent>
    ...
    <ToggletipActions>
    </ToggletipActions>
  </ToggletipContent>
</Toggletip>

Open questions

• How do we allow this component to be flexible for different targets and layouts?
• What specific layouts would we like to provide?
• What layering rules should this component adhere to? Is it always on top, z-index wise?

Links & Resources