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

About you
Your name

Name

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.

Your email address

Email address

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.

Confirm your email address
<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 →