<!--
  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="{{noHeading.idSuffix}}-label" class="{{@root.prefix}}--tooltip__label">
  Tooltip label
  <button aria-expanded="false" aria-labelledby="{{noHeading.idSuffix}}-label" data-tooltip-trigger data-tooltip-target="#{{noHeading.idSuffix}}"
    class="{{@root.prefix}}--tooltip__trigger" aria-controls="{{noHeading.idSuffix}}">
    {{ carbon-icon 'Information16' }}
  </button>
</div>
<div id="{{noHeading.idSuffix}}" aria-hidden="true" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip">
  <span class="{{@root.prefix}}--tooltip__caret"></span>
  <div class="{{@root.prefix}}--tooltip__content" tabindex="-1" role="dialog" aria-describedby="{{noHeading.idSuffix}}-body" aria-labelledby="{{noHeading.idSuffix}}-label">
    <p id="{{noHeading.idSuffix}}-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="{{@root.prefix}}--tooltip__footer">
      <a href="#" class="{{@root.prefix}}--link">Learn More</a>
      <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary {{@root.prefix}}--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="{{heading.idSuffix}}-label" class="{{@root.prefix}}--tooltip__label">
  Tooltip label
  <button aria-expanded="false" aria-labelledby="{{heading.idSuffix}}-label" data-tooltip-trigger data-tooltip-target="#{{heading.idSuffix}}"
    class="{{@root.prefix}}--tooltip__trigger" aria-controls="{{heading.idSuffix}}">
    {{ carbon-icon 'Information16' }}
  </button>
</div>
<div id="{{heading.idSuffix}}" aria-hidden="true" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip">
  <span class="{{@root.prefix}}--tooltip__caret"></span>
  <div class="{{@root.prefix}}--tooltip__content" tabindex="-1" role="dialog" aria-labelledby="{{heading.idSuffix}}-heading" aria-describedby="{{heading.idSuffix}}-body">
    <h4 id="{{heading.idSuffix}}-heading" class="{{@root.prefix}}--tooltip__heading">Heading within a Tooltip</h4>
    <p id="{{heading.idSuffix}}-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="{{label.idSuffix}}-label" class="{{@root.prefix}}--tooltip__label">
  Tooltip label
  <div tabindex="0" aria-expanded="false" aria-labelledby="{{label.idSuffix}}-label" data-tooltip-trigger data-tooltip-target="#{{label.idSuffix}}"
    role="button" class="{{@root.prefix}}--tooltip__trigger" aria-controls="{{label.idSuffix}}">
    {{ carbon-icon 'Information16' }}
  </div>
</div>
<div id="{{label.idSuffix}}" aria-hidden="true" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip">
  <span class="{{@root.prefix}}--tooltip__caret"></span>
  <div class="{{@root.prefix}}--tooltip__content" tabindex="-1" role="dialog" aria-describedby="{{label.idSuffix}}-body" aria-label="Tooltip label">
    <p id="{{label.idSuffix}}-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="{{@root.prefix}}--tooltip__footer">
      <a href="#" class="{{@root.prefix}}--link">Learn More</a>
      <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary {{@root.prefix}}--btn--sm"
        type="button">Create</button>
    </div>
  </div>
  <span tabindex="0"></span>
</div>
