Infotip Component

Reveals helpful information about a nearby non-interactive element or region of a page.

Infotip Button is a click-activated popover . It discloses supplementary or advisory content about an existing onscreen element or region.

Thematically, you can think of the infotip content fulfilling the same role as footnotes in a page.

Infotip Button is a composite pattern containing a button and an overlay. The button toggles the visibility of the overlay. The overlay contains the help content.

Terminology

We use the following terminology when discussing this pattern.

  • infotip : the pattern as a whole, comprised of the following sub-parts
  • button : the button that hosts the overlay
  • overlay/bubble : the overlay that contains the tip
  • pointer : the visual affordance that "points" to the button
  • tip : the tip content
  • expanded : an infotip with expanded overlay
  • collapsed : an infotip with collapsed overlay
Image Placeholder ComponentInline Notice Component