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.