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.

A tooltip consists of two main elements, <div class="goco-c-tooltip__bubble"> that positions the content absolutely, and the <div class="goco-c-tooltip__content"> that contains the markup for the intended tooltip message.

To reveal the tooltip content apply the class goco-c-tooltip--open to <div class="goco-c-tooltip">.

NOTE

A tooltip must be included within a <fieldset class="goco-c-fieldset">.

<div class="goco-c-tooltip">
  <button class="goco-c-tooltip__btn" type="button">
    <svg class="goco-c-tooltip__open-icon" aria-hidden="true" focusable="false" viewBox="0 0 20 20">
      <path d="M9.94 0C4.45 0 0 4.477 0 10s4.45 10 9.94 10c5.49 0 9.94-4.477 9.94-10-.005-5.52-4.452-9.995-9.94-10zm0 18.095c-4.444 0-8.047-3.624-8.047-8.095 0-4.47 3.603-8.095 8.047-8.095 4.444 0 8.047 3.624 8.047 8.095-.005 4.469-3.605 8.09-8.047 8.095zm2.177-12.771c.64.593.987 1.44.947 2.314.025.691-.2 1.368-.634 1.905-.397.493-.953.83-1.572.952v1.229H8.331V9.295a2.61 2.61 0 001.562-.4 1.25 1.25 0 00.52-1.076 1.089 1.089 0 00-.397-.952 1.885 1.885 0 00-1.136-.305c-.388.007-.771.091-1.127.248a3.177 3.177 0 00-.946.58V5.2a3.4 3.4 0 011.022-.505 5.31 5.31 0 011.638-.219 3.772 3.772 0 012.65.848zm-1.514 7.619c.444.419.585 1.07.353 1.637-.23.567-.786.93-1.395.915-.384.02-.76-.117-1.04-.38a1.471 1.471 0 01-.417-1.077c-.02-.4.131-.788.416-1.067a1.517 1.517 0 012.073 0l.01-.028z" />
    </svg>
    <svg class="goco-c-tooltip__close-icon" aria-hidden="true" focusable="false" viewBox="0 0 20 20">
      <path d="M13.32 9.942l6.06-6.061A2.308 2.308 0 0016.12.619l-6.062 6.062L3.996.619A2.308 2.308 0 00.735 3.881l6.061 6.061-6.061 6.062a2.308 2.308 0 103.261 3.261l6.062-6.061 6.061 6.061a2.308 2.308 0 003.262-3.261l-6.062-6.062z"/>
    </svg>
  </button>
  <div class="goco-c-tooltip__bubble">
    <div class="goco-c-tooltip__content">
      <!-- content -->
    </div>
    <button class="goco-c-tooltip__bubble-btn" type="button">
      <svg aria-hidden="true" focusable="false" class="goco-c-tooltip__bubble-close-icon" viewBox="0 0 20 20">
        <path d="M13.32 9.942l6.06-6.061A2.308 2.308 0 0016.12.619l-6.062 6.062L3.996.619A2.308 2.308 0 00.735 3.881l6.061 6.061-6.061 6.062a2.308 2.308 0 103.261 3.261l6.062-6.061 6.061 6.061a2.308 2.308 0 003.262-3.261l-6.062-6.062z"/>
      </svg>      
    </button>
  </div>
</div>

# Default

<div class="goco-l-grid-container">
  <div class="goco-l-form-grid-row">
    <div class="goco-l-form-grid-main-col">
      <fieldset class="goco-c-fieldset-group">
        <legend class="goco-c-fieldset-group__legend">About you</legend>
        <fieldset class="goco-c-fieldset">
          <legend class="goco-c-fieldset__legend">Your title</legend>
          <div class="goco-c-fieldset__content">
            <div class="goco-c-input goco-c-input--medium">
              <input class="goco-c-input__native" type="text" id="input-1" />
            </div>
            <div class="goco-c-tooltip goco-c-tooltip--open">
              <button class="goco-c-tooltip__btn" type="button">
                <svg class="goco-c-tooltip__open-icon" aria-hidden="true" focusable="false" viewBox="0 0 20 20">
                  <path d="M9.94 0C4.45 0 0 4.477 0 10s4.45 10 9.94 10c5.49 0 9.94-4.477 9.94-10-.005-5.52-4.452-9.995-9.94-10zm0 18.095c-4.444 0-8.047-3.624-8.047-8.095 0-4.47 3.603-8.095 8.047-8.095 4.444 0 8.047 3.624 8.047 8.095-.005 4.469-3.605 8.09-8.047 8.095zm2.177-12.771c.64.593.987 1.44.947 2.314.025.691-.2 1.368-.634 1.905-.397.493-.953.83-1.572.952v1.229H8.331V9.295a2.61 2.61 0 001.562-.4 1.25 1.25 0 00.52-1.076 1.089 1.089 0 00-.397-.952 1.885 1.885 0 00-1.136-.305c-.388.007-.771.091-1.127.248a3.177 3.177 0 00-.946.58V5.2a3.4 3.4 0 011.022-.505 5.31 5.31 0 011.638-.219 3.772 3.772 0 012.65.848zm-1.514 7.619c.444.419.585 1.07.353 1.637-.23.567-.786.93-1.395.915-.384.02-.76-.117-1.04-.38a1.471 1.471 0 01-.417-1.077c-.02-.4.131-.788.416-1.067a1.517 1.517 0 012.073 0l.01-.028z" />
                </svg>
                <svg class="goco-c-tooltip__close-icon" aria-hidden="true" focusable="false" viewBox="0 0 20 20">
                  <path d="M13.32 9.942l6.06-6.061A2.308 2.308 0 0016.12.619l-6.062 6.062L3.996.619A2.308 2.308 0 00.735 3.881l6.061 6.061-6.061 6.062a2.308 2.308 0 103.261 3.261l6.062-6.061 6.061 6.061a2.308 2.308 0 003.262-3.261l-6.062-6.062z"/>
                </svg>
              </button>
              <div class="goco-c-tooltip__bubble">
                <div class="goco-c-tooltip__content">
                  <h3>Date of purchase</h3>
                  <p>
                    If you don’t know the exact date of purchase, please use an approximate date.
                  </p>
                </div>
                <button class="goco-c-tooltip__bubble-btn" type="button">
                  <svg aria-hidden="true" focusable="false" class="goco-c-tooltip__bubble-close-icon" viewBox="0 0 20 20">
                    <path d="M13.32 9.942l6.06-6.061A2.308 2.308 0 0016.12.619l-6.062 6.062L3.996.619A2.308 2.308 0 00.735 3.881l6.061 6.061-6.061 6.062a2.308 2.308 0 103.261 3.261l6.062-6.061 6.061 6.061a2.308 2.308 0 003.262-3.261l-6.062-6.062z"/>
                  </svg>      
                </button>
              </div>
            </div>
          </div>
        </fieldset>
        <fieldset class="goco-c-fieldset">
          <legend class="goco-c-fieldset__legend">Your email address</legend>
          <div class="goco-c-fieldset__content">
            <div class="goco-c-input goco-c-input--medium">
              <input class="goco-c-input__native" type="email" id="input-2" />
            </div>
            <div class="goco-c-tooltip">
              <button class="goco-c-tooltip__btn" type="button">
                <svg class="goco-c-tooltip__open-icon" aria-hidden="true" focusable="false" viewBox="0 0 20 20">
                  <path d="M9.94 0C4.45 0 0 4.477 0 10s4.45 10 9.94 10c5.49 0 9.94-4.477 9.94-10-.005-5.52-4.452-9.995-9.94-10zm0 18.095c-4.444 0-8.047-3.624-8.047-8.095 0-4.47 3.603-8.095 8.047-8.095 4.444 0 8.047 3.624 8.047 8.095-.005 4.469-3.605 8.09-8.047 8.095zm2.177-12.771c.64.593.987 1.44.947 2.314.025.691-.2 1.368-.634 1.905-.397.493-.953.83-1.572.952v1.229H8.331V9.295a2.61 2.61 0 001.562-.4 1.25 1.25 0 00.52-1.076 1.089 1.089 0 00-.397-.952 1.885 1.885 0 00-1.136-.305c-.388.007-.771.091-1.127.248a3.177 3.177 0 00-.946.58V5.2a3.4 3.4 0 011.022-.505 5.31 5.31 0 011.638-.219 3.772 3.772 0 012.65.848zm-1.514 7.619c.444.419.585 1.07.353 1.637-.23.567-.786.93-1.395.915-.384.02-.76-.117-1.04-.38a1.471 1.471 0 01-.417-1.077c-.02-.4.131-.788.416-1.067a1.517 1.517 0 012.073 0l.01-.028z" />
                </svg>
                <svg class="goco-c-tooltip__close-icon" aria-hidden="true" focusable="false" viewBox="0 0 20 20">
                  <path d="M13.32 9.942l6.06-6.061A2.308 2.308 0 0016.12.619l-6.062 6.062L3.996.619A2.308 2.308 0 00.735 3.881l6.061 6.061-6.061 6.062a2.308 2.308 0 103.261 3.261l6.062-6.061 6.061 6.061a2.308 2.308 0 003.262-3.261l-6.062-6.062z"/>
                </svg>
              </button>
              <div class="goco-c-tooltip__bubble">
                <div class="goco-c-tooltip__content">
                  <h3>Email address</h3>
                  <p>
                    Your email address forms part of your quote retrieval details.
                  </p>
                </div>
                <button class="goco-c-tooltip__bubble-btn" type="button">
                  <svg aria-hidden="true" focusable="false" class="goco-c-tooltip__bubble-close-icon" viewBox="0 0 20 20">
                    <path d="M13.32 9.942l6.06-6.061A2.308 2.308 0 0016.12.619l-6.062 6.062L3.996.619A2.308 2.308 0 00.735 3.881l6.061 6.061-6.061 6.062a2.308 2.308 0 103.261 3.261l6.062-6.061 6.061 6.061a2.308 2.308 0 003.262-3.261l-6.062-6.062z"/>
                  </svg>      
                </button>
              </div>
            </div>
          </div>
        </fieldset>
      </fieldset>
    </div>
  </div>
</div>

# Content types

Tooltips support a wide variety of content, including headings, text, list groups, and links. Below is an example of what’s supported.

<div class="goco-l-grid-container">
  <div class="goco-l-form-grid-row">
    <div class="goco-l-form-grid-main-col">
      <fieldset class="goco-c-fieldset-group">
        <legend class="goco-c-fieldset-group__legend">About you</legend>
        <fieldset class="goco-c-fieldset">
          <legend class="goco-c-fieldset__legend">Your title</legend>
          <div class="goco-c-fieldset__content">
            <div class="goco-c-input goco-c-input--medium">
              <input class="goco-c-input__native" type="text" id="input-3" />
            </div>
            <div class="goco-c-tooltip goco-c-tooltip--open">
              <button class="goco-c-tooltip__btn" type="button">
                <svg class="goco-c-tooltip__open-icon" aria-hidden="true" focusable="false" viewBox="0 0 20 20">
                  <path d="M9.94 0C4.45 0 0 4.477 0 10s4.45 10 9.94 10c5.49 0 9.94-4.477 9.94-10-.005-5.52-4.452-9.995-9.94-10zm0 18.095c-4.444 0-8.047-3.624-8.047-8.095 0-4.47 3.603-8.095 8.047-8.095 4.444 0 8.047 3.624 8.047 8.095-.005 4.469-3.605 8.09-8.047 8.095zm2.177-12.771c.64.593.987 1.44.947 2.314.025.691-.2 1.368-.634 1.905-.397.493-.953.83-1.572.952v1.229H8.331V9.295a2.61 2.61 0 001.562-.4 1.25 1.25 0 00.52-1.076 1.089 1.089 0 00-.397-.952 1.885 1.885 0 00-1.136-.305c-.388.007-.771.091-1.127.248a3.177 3.177 0 00-.946.58V5.2a3.4 3.4 0 011.022-.505 5.31 5.31 0 011.638-.219 3.772 3.772 0 012.65.848zm-1.514 7.619c.444.419.585 1.07.353 1.637-.23.567-.786.93-1.395.915-.384.02-.76-.117-1.04-.38a1.471 1.471 0 01-.417-1.077c-.02-.4.131-.788.416-1.067a1.517 1.517 0 012.073 0l.01-.028z" />
                </svg>
                <svg class="goco-c-tooltip__close-icon" aria-hidden="true" focusable="false" viewBox="0 0 20 20">
                  <path d="M13.32 9.942l6.06-6.061A2.308 2.308 0 0016.12.619l-6.062 6.062L3.996.619A2.308 2.308 0 00.735 3.881l6.061 6.061-6.061 6.062a2.308 2.308 0 103.261 3.261l6.062-6.061 6.061 6.061a2.308 2.308 0 003.262-3.261l-6.062-6.062z"/>
                </svg>
              </button>
              <div class="goco-c-tooltip__bubble">
                <div class="goco-c-tooltip__content">
                  <h3>Main heading</h3>
                  <h4>Sub heading</h4>
                  <p>
                    Sed posuere consectetur est at <a href="#">lobortis</a>.
                  </p>
                  <ul>
                    <li>
                      <strong>List item</strong> - Sed posuere consectetur.
                    </li>
                    <li>
                      <strong>List item</strong> - Sed posuere consectetur.
                    </li>
                  </ul>
                </div>
                <button class="goco-c-tooltip__bubble-btn" type="button">
                  <svg aria-hidden="true" focusable="false" class="goco-c-tooltip__bubble-close-icon" viewBox="0 0 20 20">
                    <path d="M13.32 9.942l6.06-6.061A2.308 2.308 0 0016.12.619l-6.062 6.062L3.996.619A2.308 2.308 0 00.735 3.881l6.061 6.061-6.061 6.062a2.308 2.308 0 103.261 3.261l6.062-6.061 6.061 6.061a2.308 2.308 0 003.262-3.261l-6.062-6.062z"/>
                  </svg>      
                </button>
              </div>
            </div>
          </div>
        </fieldset>
        <fieldset class="goco-c-fieldset">
          <legend class="goco-c-fieldset__legend">Your email address</legend>
          <div class="goco-c-fieldset__content">
            <div class="goco-c-input goco-c-input--medium">
              <input class="goco-c-input__native" type="email" id="input-4" />
            </div>
          </div>
        </fieldset>
        <fieldset class="goco-c-fieldset">
          <legend class="goco-c-fieldset__legend">Confirm your email address</legend>
          <div class="goco-c-fieldset__content">
            <div class="goco-c-input goco-c-input--medium">
              <input class="goco-c-input__native" type="email" id="input-5" />
            </div>
          </div>
        </fieldset>
      </fieldset>
    </div>
  </div>
</div>

# Inventory

Element Description
<h3> Main heading
<h4> Sub headings
<p> Paragraph text
<ul> List groups
<li> List items
<a> Links within paragraph text
<strong> Bold characters within paragraph text

← Card →