Home
Components
Tooltips

Tooltips

Use tooltips to provide additional information when hovering over an element.

The tooltip container, which includes the tooltip as well as the element that triggers it, requires the aria-labelledby attribute, which points to the id of the tooltip itself. The tooltip element also requires the attribute role="tooltip".

The tooltip will take up as much width as needed for its content up to the max-width value. You can override this value with a custom property.

Custom Property	Default Value	Description
`--max-width`	320px	The maximum width of the tooltip

Example
A tooltip used on a dfn element.

HTML

<div class="pv-tooltip" aria-labelledby="description">
  <dfn>Common Description</dfn>
  <div role="tooltip" id="description">
    <p>Patient underwent abdominal imaging with ultrasound, contrast enhanced ct or contrast mri for hcc.</p>
  </div>
</div>

Positioning

By default, tooltips will be placed below the element that triggers them and aligned to the left. You can override this behavior with the data-position attribute.

data-position="bottom-center"

data-position="bottom-right"

data-position="top-left"

Where does this come from?

data-position="top-center"

data-position="top-right"

CVC

data-position="center-right"

HTML

<div class="pv-tooltip" aria-labelledby="products" data-position="bottom-center">
  <dfn>5 Products</dfn>
  <div role="tooltip" id="products">
    <ul role="list">
      <li>Clear Contracts</li>
      <li>Extracts</li>
      <li>Rate Analytics</li>
      <li>Rate Sense</li>
      <li>Instant GFE</li>
    </ul>
  </div>
</div>
<div class="pv-tooltip" aria-labelledby="people" data-position="bottom-right">
  <dfn>+8</dfn>
  <div role="tooltip" id="people">
    <ul role="list">
      <li>Ally Allison</li>
      <li>Billy Williams</li>
      <li>Carson Carsons</li>
      <li>David Davids</li>
      <li>Frank Franklin</li>
      <li>Harry Harrison</li>
      <li>Jeff Jefferson</li>
      <li>Rob Robers</li>
    </ul>
  </div>
</div>
<div class="pv-surface pv-inset-square pv-flex">
  <p>Where does this come from?</p>
  <div class="pv-tooltip" aria-labelledby="rates" data-position="top-left">
    <svg aria-hidden="true" class="pv-icon">
      <title>alert-circle</title>
      <use xlink:href="#alert-circle"></use>
    </svg>
    <div role="tooltip" id="rates">
      <p>These are the rates from the provider.</p>
    </div>
  </div>
</div>
<div class="pv-tooltip" aria-labelledby="verified" data-position="top-center">
  <svg aria-hidden="true" class="pv-icon-24 pv-text-brand">
      <title>alert-circle</title>
      <use xlink:href="#alert-circle"></use>
    </svg>
  <div role="tooltip" id="verified">
    <p>Verified Provider</p>
  </div>
</div>
<div class="pv-space-between">
  <label class="pv-label" for="cvc">CVC</label>
  <div class="pv-tooltip" aria-labelledby="cvc-desc" data-position="top-right">
    <svg aria-hidden="true" class="pv-icon">
      <title>alert-circle</title>
      <use xlink:href="#alert-circle"></use>
    </svg>
    <div role="tooltip" id="cvc-desc">
      <p>3-digit code on the back of your card</p>
    </div>
  </div>
</div>
<input type="text" class="pv-input-text" name="cvc">
<div>
  <p class="pv-text-title-sm pv-stack-4">data-position="center-right"</p>
  <div class="pv-surface pv-inset-square">
    <div class="pv-hover-card" aria-labelledby="verified" data-position="center-right" style="--max-width: 360px">
      <div class="pv-radius pv-surface-brand-inverse pv-inset-square" style="--radius: 50%; --inset-size: 4px">
        <svg aria-hidden="true" class="pv-icon-12 pv-text-inverse">
      <title>arrow-down</title>
      <use xlink:href="#arrow-down"></use>
    </svg>
      </div>
      <div role="tooltip" id="verified" class="pv-flow-8">
        <p><strong>Behavioral Health</strong> had costs <strong>3%</strong> above the average at <strong>Evergreen Memorial Hospital</strong>.</p>
        <div class="pv-space-between">
          <p class="pv-text-subdued">Average Cost of Claims</p>
          <div class="pv-flex">
            <p class="pv-text-subdued">$</p>
            <p><strong>39,123,987</strong></p>
            <div class="pv-radius pv-surface-critical pv-inset-square" style="--radius: 50%; --inset-size: 4px">
              <svg aria-hidden="true" class="pv-icon-12 pv-text-critical">
      <title>arrow-up</title>
      <use xlink:href="#arrow-up"></use>
    </svg>
            </div>
          </div>
        </div>
        <div class="pv-space-between">
          <p class="pv-text-subdued">Confidence Score</p>
          <div class="pv-flex">
            <p><strong id="rating">3</strong></p>
            <div class="pv-rating" data-rating="bar">
              <meter id="rating" min="0" max="5" value="3" aria-described-by="rating">4</meter>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Hover Cards

Use hover cards to display more complex details on hover. Hover cards support all of the same positioning attributes as tooltips.

Example
A hover card.

HTML

<div class="pv-hover-card" aria-labelledby="verified" data-position="center-right" style="--max-width: 360px">
  <div class="pv-radius pv-surface-brand-inverse pv-inset-square" style="--radius: 50%; --inset-size: 4px">
    <svg aria-hidden="true" class="pv-icon-12 pv-text-inverse">
      <title>arrow-down</title>
      <use xlink:href="#arrow-down"></use>
    </svg>
  </div>
  <div role="tooltip" id="verified" class="pv-flow-8">
    <p><strong>Behavioral Health</strong> had costs <strong>3%</strong> above the average at <strong>Evergreen Memorial Hospital</strong>.</p>
    <div class="pv-space-between">
      <p class="pv-text-subdued">Average Cost of Claims</p>
      <div class="pv-flex">
        <p class="pv-text-subdued">$</p>
        <p><strong>39,123,987</strong></p>
        <div class="pv-radius pv-surface-critical pv-inset-square" style="--radius: 50%; --inset-size: 4px">
          <svg aria-hidden="true" class="pv-icon-12 pv-text-critical">
      <title>arrow-up</title>
      <use xlink:href="#arrow-up"></use>
    </svg>
        </div>
      </div>
    </div>
    <div class="pv-space-between">
      <p class="pv-text-subdued">Confidence Score</p>
      <div class="pv-flex">
        <p><strong id="rating">3</strong></p>
        <div class="pv-rating" data-rating="bar">
          <meter id="rating" min="0" max="5" value="3" aria-described-by="rating">4</meter>
        </div>
      </div>
    </div>
  </div>
</div>