Balloon

The gds-balloon component is meant to be used to display contextual information when rolling over or clicking some other element. It is, in essence, a more robust and flexible version of a tooltip complete with formatting for titles and descriptions instead of just a simple string of text. While it has built in elements for title and description, it can contain any formatted HTML.

Use the position modifiers gds-balloon--left, gds-balloon--right, gds-balloon--top, & gds-balloon--bottom to make the arrow position correctly with respect to the balloon and the corresponding element being highlighted.

Demo

Balloon Title

A short description goes here

    <div style={{height: 100}}>
    <div className="gds-balloon gds-balloon--left">
  <div className="gds-balloon__group gds-balloon__group--divide-bottom">
      <span className="gds-balloon__label gds-form-group__label">Balloon Title</span>
  </div>
  <div className="gds-balloon__group">
      <span className="gds-balloon__description">A short description goes here</span>
  </div>
</div>
</div>


    <div style={{height: 100}}>
    <div className="gds-balloon gds-balloon--left">
  <div className="gds-balloon__group gds-balloon__group--divide-bottom">
      <span className="gds-balloon__label gds-form-group__label">Balloon Title</span>
  </div>
  <div className="gds-balloon__group">
      <span className="gds-balloon__description">A short description goes here</span>
  </div>
</div>
</div>

Error Log

Position

gds-balloon--right

gds-balloon--left

gds-balloon--top

gds-balloon--bottom

Color (Context)

gds-balloon--primary

gds-balloon--secondary

gds-balloon--tertiary

gds-balloon--success

gds-balloon--warning

gds-balloon--danger

gds-balloon--dark

gds-balloon__label--dark

gds-balloon__label--primary

gds-balloon__label--secondary

gds-balloon__label--tertiary

gds-balloon__label--success

gds-balloon__label--warning

gds-balloon__label--danger

gds-balloon__group--primary

gds-balloon__group--secondary

gds-balloon__group--tertiary

gds-balloon__group--success

gds-balloon__group--warning

gds-balloon__group--danger

Add Ons

gds-balloon__group--divide-bottom

gds-balloon__group--divide-top