carbon-components/html/tooltip/tooltip.html

The Carbon Design System is IBM’s open-source design system for products and experiences.

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<!-- Using the trigger label as the tooltip label (can be repetitive for screen reader users) -->
<div id="example-w5o9ow8jwc-label" class="bx--tooltip__label">
  Tooltip label
  <button aria-expanded="false" aria-labelledby="example-w5o9ow8jwc-label" data-tooltip-trigger data-tooltip-target="#example-w5o9ow8jwc"
    class="bx--tooltip__trigger" aria-controls="example-w5o9ow8jwc">
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 11L8.5 6.5 6.5 6.5 6.5 7.5 7.5 7.5 7.5 11 6 11 6 12 10 12 10 11zM8 3.5c-.4 0-.8.3-.8.8S7.6 5 8 5c.4 0 .8-.3.8-.8S8.4 3.5 8 3.5z"></path><path d="M8,15c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S11.9,15,8,15z M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z"></path></svg>
  </button>
</div>
<div id="example-w5o9ow8jwc" aria-hidden="true" data-floating-menu-direction="bottom" class="bx--tooltip">
  <span class="bx--tooltip__caret"></span>
  <div class="bx--tooltip__content" tabindex="-1" role="dialog" aria-describedby="example-w5o9ow8jwc-body" aria-labelledby="example-w5o9ow8jwc-label">
    <p id="example-w5o9ow8jwc-body" >This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is
      needed please use a modal instead.</p>
    <div class="bx--tooltip__footer">
      <a href="#" class="bx--link">Learn More</a>
      <button class="bx--btn bx--btn--primary bx--btn--sm"
        type="button">Create</button>
    </div>
  </div>
  <!-- Note: focusable span allows for focus wrap feature within Tooltips -->
  <span tabindex="0"></span>
</div>

<!-- Tooltip with Rich Text (heading and body content) but no interactive elements -->
<div id="example-p8kryuno6as-label" class="bx--tooltip__label">
  Tooltip label
  <button aria-expanded="false" aria-labelledby="example-p8kryuno6as-label" data-tooltip-trigger data-tooltip-target="#example-p8kryuno6as"
    class="bx--tooltip__trigger" aria-controls="example-p8kryuno6as">
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 11L8.5 6.5 6.5 6.5 6.5 7.5 7.5 7.5 7.5 11 6 11 6 12 10 12 10 11zM8 3.5c-.4 0-.8.3-.8.8S7.6 5 8 5c.4 0 .8-.3.8-.8S8.4 3.5 8 3.5z"></path><path d="M8,15c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S11.9,15,8,15z M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z"></path></svg>
  </button>
</div>
<div id="example-p8kryuno6as" aria-hidden="true" data-floating-menu-direction="bottom" class="bx--tooltip">
  <span class="bx--tooltip__caret"></span>
  <div class="bx--tooltip__content" tabindex="-1" role="dialog" aria-labelledby="example-p8kryuno6as-heading" aria-describedby="example-p8kryuno6as-body">
    <h4 id="example-p8kryuno6as-heading" class="bx--tooltip__heading">Heading within a Tooltip</h4>
    <p id="example-p8kryuno6as-body" >This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is
      needed please use a modal instead.</p>
  </div>
  <span tabindex="0"></span>
</div>

<!-- Tooltip without visible label (not recommended for WCAG 2.1) -->
<div id="example-lu7fdoe4fma-label" class="bx--tooltip__label">
  Tooltip label
  <div tabindex="0" aria-expanded="false" aria-labelledby="example-lu7fdoe4fma-label" data-tooltip-trigger data-tooltip-target="#example-lu7fdoe4fma"
    role="button" class="bx--tooltip__trigger" aria-controls="example-lu7fdoe4fma">
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 11L8.5 6.5 6.5 6.5 6.5 7.5 7.5 7.5 7.5 11 6 11 6 12 10 12 10 11zM8 3.5c-.4 0-.8.3-.8.8S7.6 5 8 5c.4 0 .8-.3.8-.8S8.4 3.5 8 3.5z"></path><path d="M8,15c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S11.9,15,8,15z M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z"></path></svg>
  </div>
</div>
<div id="example-lu7fdoe4fma" aria-hidden="true" data-floating-menu-direction="bottom" class="bx--tooltip">
  <span class="bx--tooltip__caret"></span>
  <div class="bx--tooltip__content" tabindex="-1" role="dialog" aria-describedby="example-lu7fdoe4fma-body" aria-label="Tooltip label">
    <p id="example-lu7fdoe4fma-body" >This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is
      needed
      please use a modal instead.</p>
    <div class="bx--tooltip__footer">
      <a href="#" class="bx--link">Learn More</a>
      <button class="bx--btn bx--btn--primary bx--btn--sm"
        type="button">Create</button>
    </div>
  </div>
  <span tabindex="0"></span>
</div>