• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Contextual help

Component status
Contribution
Current version@spectrum-css/contextualhelp@3.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/contextualhelp@4.0.0-s2-foundations.13
ReleasedSeptember 12, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Info Icon
Contribution

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <div class="spectrum-ContextualHelp">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXS spectrum-ContextualHelp-button">
        <svg class="spectrum-Icon spectrum-Icon--sizeXS spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Info" />
        </svg>
      </button>
      <div class="spectrum-Popover is-open spectrum-Popover--bottom-start spectrum-ContextualHelp-popover" role="presentation">
        <h2 class="spectrum-ContextualHelp-heading">Permission required</h2>
        <p class="spectrum-ContextualHelp-body">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.</p>
      </div>
      <div class="dummy-spacing" style="position: relative; height: 248px; min-width: 400px; max-width: 50%;"></div>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <div class="spectrum-ContextualHelp">
      <div class="spectrum-Popover is-open spectrum-Popover--top spectrum-ContextualHelp-popover" role="presentation">
        <h2 class="spectrum-ContextualHelp-heading">Permission required</h2>
        <p class="spectrum-ContextualHelp-body">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.</p>
      </div>
      <div class="dummy-spacing" style="position: relative; height: 166px; min-width: 400px; max-width: 50%;"></div>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXS spectrum-ContextualHelp-button">
        <svg class="spectrum-Icon spectrum-Icon--sizeXS spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Info" />
        </svg>
      </button>
    </div>
  </div>
</div>

Help Icon
Contribution

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <div class="spectrum-ContextualHelp">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXS spectrum-ContextualHelp-button">
        <svg class="spectrum-Icon spectrum-Icon--sizeXS spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Help" />
        </svg>
      </button>
      <div class="spectrum-Popover is-open spectrum-Popover--bottom-start spectrum-ContextualHelp-popover" role="presentation">
        <h2 class="spectrum-ContextualHelp-heading">Permission required</h2>
        <p class="spectrum-ContextualHelp-body">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.</p>
        <a class="spectrum-Link spectrum-ContextualHelp-link" href="#">Learn about permissions</a>
      </div>
      <div class="dummy-spacing" style="position: relative; height: 248px; min-width: 400px; max-width: 50%;"></div>
    </div>
  </div>
</div>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.