GoComponents

# Tooltip

The tooltip is used to display contextual information to the user. The tooltip can provide additional related content for a question in a journey form page.

NOTE

A tooltip must be included within a <GocoFieldset> component.

NOTE

The tooltip makes use of slots. This makes it possible to nest content inside the component.

<GocoTooltip>
  <!-- Slot content -->
</GocoTooltip>

# Content types

Tooltips support a wide variety of content, including headings, text, list groups, and links. Follow the link to see an example of what’s supported. Tooltip content types

# Default

<div class="goco-l-grid-container">
  <div class="goco-l-form-grid-row">
    <div class="goco-l-form-grid-main-col">
      <GocoFieldsetGroup legend="About you">
        <GocoFieldset legend="Your name">
          <GocoInput id="input-1" />
          <GocoTooltip>
            <h3>Name</h3>
            <p>
              Please tell us about the main policyholder (the Proposer) here; 
              we'll ask you about anyone else you'd like to add to the policy 
              later on.
            </p>
          </GocoTooltip>
        </GocoFieldset>
        <GocoFieldset legend="Your email address">
          <GocoInput id="input-2" />
          <GocoTooltip>
            <h3>Email address</h3>
            <p>
              Your email address forms part of your quote retrieval details, 
              so you can login to edit your quotes, view your prices or purchase 
              your insurance.
            </p>
          </GocoTooltip>
        </GocoFieldset>
        <GocoFieldset legend="Confirm your email address">
          <GocoInput id="input-3" />
        </GocoFieldset>
      </GocoFieldsetGroup>
    </div>
  </div>
</div>

← Releases →