{{#> web/layout/default title="Tooltip" parentPageName="Components" }}

  <section class="UNSTABLE_Section">

    <div class="Container">

      <h2 class="docs-Heading">Default</h2>

      <div class="docs-Stack docs-Stack--start">

        <div class="Tooltip d-inline-block" data-spirit-element="tooltip">
          <button
            type="button"
            id="button-tooltip-default"
            class="Button Button--primary Button--medium"
            aria-describedby="tooltip-tooltip-default"
            data-spirit-toggle="tooltip"
            data-spirit-target="#tooltip-tooltip-default"
          >
            I have a tooltip 😎
          </button>
          <div
            id="tooltip-tooltip-default"
            class="TooltipPopover"
          >
            Hello there!
            <span class="TooltipPopover__arrow" data-spirit-element="arrow"></span>
          </div>
        </div>

      </div>

    </div>

  </section>

  <section class="UNSTABLE_Section">

    <div class="Container">

      <h2 class="docs-Heading">Dismissible Tooltip</h2>

      <div class="docs-Stack docs-Stack--start">

        <div class="Tooltip d-inline-block" data-spirit-element="tooltip">
          <button
            class="Button Button--primary Button--medium"
            data-spirit-toggle="tooltip"
            data-spirit-target="#my-dismissible-tooltip"
            aria-describedby="my-dismissible-tooltip"
          >
            I have a tooltip 😎
          </button>
          <div
            id="my-dismissible-tooltip"
            class="TooltipPopover TooltipPopover--dismissible"
            data-spirit-placement="right"
            data-spirit-trigger="click"
          >
            Close me
            <button
              type="button"
              class="TooltipPopover__close"
              data-spirit-dismiss="tooltip"
              data-spirit-target="#my-dismissible-tooltip"
              aria-controls="my-dismissible-tooltip"
              aria-expanded="true"
            >
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
              <span class="accessibility-hidden">Close</span>
            </button>
            <span class="TooltipPopover__arrow" data-spirit-element="arrow"></span>
          </div>
        </div>

      </div>

    </div>

  </section>

  <section class="UNSTABLE_Section">

    <div class="Container">

      <h2 class="docs-Heading">Dismissible Tooltip via JS API</h2>

      <div class="docs-Stack docs-Stack--start">
        <p>
          Saves data to local storage.
        </p>

        <script type="module" src="dismissible-tooltip.mjs"></script>

        <div class="Tooltip d-inline-block" data-spirit-element="tooltip">
          <button id="my-dismissible-button-with-local-storage" class="Button Button--primary Button--medium" data-spirit-target="#my-dismissible-tooltip-with-local-storage" aria-describedby="my-dismissible-tooltip-with-local-storage">I have a tooltip 😎</button>
          <div
            id="my-dismissible-tooltip-with-local-storage"
            class="TooltipPopover TooltipPopover--dismissible is-hidden"
            data-spirit-placement="right"
            data-spirit-flip="true"
            data-spirit-flip-cross-axis="true"
            data-spirit-flip-fallback-placements="right, top-end"
            data-spirit-trigger="manual"
          >
            Close me
            <button
              id="my-dismissible-tooltip-with-local-storage-close"
              type="button"
              class="TooltipPopover__close"
              aria-controls="my-dismissible-tooltip-with-local-storage"
              aria-expanded="true"
            >
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
              <span class="accessibility-hidden">Close</span>
            </button>
            <span class="TooltipPopover__arrow" data-spirit-element="arrow"></span>
          </div>
        </div>

      </div>

    </div>

  </section>

  <section class="UNSTABLE_Section">

    <div class="Container">

      <h2 class="docs-Heading">Tooltip with Link Component</h2>

      <div class="docs-Stack docs-Stack--start">

        <div class="Tooltip d-inline-block" data-spirit-element="tooltip">
          <button
            type="button"
            id="button-example-hover"
            class="Button Button--primary Button--medium"
            aria-describedby="tooltip-example-hover"
            data-spirit-toggle="tooltip"
            data-spirit-target="#tooltip-example-hover"
          >
            I have a tooltip 😎
          </button>
          <div
            id="tooltip-example-hover"
            class="TooltipPopover is-hidden"
            data-spirit-placement="right"
            data-spirit-flip-fallback-placements="left, top-start, bottom-start"
          >
            Hello there! <br />
            <a href="#" class="link-inverted">Click me</a>
            <span class="TooltipPopover__arrow" data-spirit-element="arrow"></span>
          </div>
        </div>

      </div>

    </div>

  </section>

  <section class="UNSTABLE_Section">

    <div class="Container">

      <h2 class="docs-Heading">Tooltip Triggers</h2>

      <div class="docs-Stack docs-Stack--start">

        <p>
          This tooltip will show on <strong>hover</strong> and <strong>click</strong>.
        </p>

        <div class="Tooltip d-inline-block" data-spirit-element="tooltip">
          <button
            type="button"
            id="button-hover-click"
            class="Button Button--primary Button--medium"
            aria-describedby="tooltip-hover-click"
            data-spirit-toggle="tooltip"
            data-spirit-target="#tooltip-hover-click"
          >
            Hover or Click me 😎
          </button>
          <div
            id="tooltip-hover-click"
            class="TooltipPopover is-hidden"
            data-spirit-placement="right"
            data-spirit-flip-fallback-placements="bottom"
            data-spirit-trigger="hover, click"
          >
            Hello there!
            <span class="TooltipPopover__arrow" data-spirit-element="arrow"></span>
          </div>
        </div>

        <br />

        <p>
          This tooltip will show only on <strong>hover</strong>.
        </p>

        <div class="Tooltip d-inline-block" data-spirit-element="tooltip">
          <button
            type="button"
            id="button-hover"
            class="Button Button--primary Button--medium"
            aria-describedby="tooltip-hover"
            data-spirit-toggle="tooltip"
            data-spirit-target="#tooltip-hover"
          >
            Hover me 😎
          </button>
          <div
            id="tooltip-hover"
            class="TooltipPopover is-hidden"
            data-spirit-placement="right"
            data-spirit-flip-fallback-placements="bottom"
            data-spirit-trigger="hover"
          >
            Hello there!
            <span class="TooltipPopover__arrow" data-spirit-element="arrow"></span>
          </div>
        </div>

        <br />

        <p>
          This tooltip will show only on <strong>click</strong>.
        </p>

        <div class="Tooltip d-inline-block" data-spirit-element="tooltip">
          <button
            type="button"
            id="button-click"
            class="Button Button--primary Button--medium"
            aria-describedby="tooltip-click"
            data-spirit-toggle="tooltip"
            data-spirit-target="#tooltip-click"
          >
            Click me 😎
          </button>
          <div
            id="tooltip-click"
            class="TooltipPopover is-hidden"
            data-spirit-placement="right"
            data-spirit-flip-fallback-placements="bottom"
            data-spirit-trigger="click"
          >
            Hello there!
            <span class="TooltipPopover__arrow" data-spirit-element="arrow"></span>
          </div>
        </div>

      </div>

    </div>

  </section>

  <section class="UNSTABLE_Section">

    <div class="Container">

      <h2 class="docs-Heading">Tooltip on Icon Component</h2>

      <div class="docs-Stack docs-Stack--start">

        <div>
          Hover or click on the icon to view the tooltip
          <div class="Tooltip d-inline-block" data-spirit-element="tooltip">
            <svg
              width="16"
              height="16"
              data-spirit-toggle="tooltip"
              data-spirit-target="#tooltip-example-with-icon">
              <use xlink:href="/assets/icons/svg/sprite.svg#info"/>
            </svg>
            <div
              id="tooltip-example-with-icon"
              class="TooltipPopover TooltipPopover--dismissible is-hidden"
              data-spirit-placement="right"
              data-spirit-flip="true"
              data-spirit-flip-cross-axis="true"
              data-spirit-flip-fallback-placements="top-start, bottom-start, left"
            >
              Close me
              <button
                id="tooltip-example-with-icon-button"
                type="button"
                class="TooltipPopover__close"
                data-spirit-dismiss="tooltip"
                data-spirit-target="#tooltip-example-with-icon"
                aria-controls="tooltip-example-with-icon"
                aria-expanded="true"
              >
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#close" />
                </svg>
                <span class="accessibility-hidden">Close</span>
              </button>
              <span class="TooltipPopover__arrow" data-spirit-element="arrow"></span>
            </div>
          </div>
        </div>

      </div>

    </div>

  </section>

  <section class="UNSTABLE_Section">

    <div class="Container">

      <h2 class="docs-Heading">Placements</h2>

      <div class="docs-Stack docs-Stack--stretch">

        <script type="module" src="placement-example.mjs"></script>

        <form autocomplete="off">
          <div class="Grid Grid--cols-3 mx-auto" style="align-items: center; justify-items: center; max-width: 30rem;">
            <div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 1">

              <label for="placement-top-start" class="Radio">
                <input type="radio" name="placement" value="top-start" id="placement-top-start" class="Radio__input" />
                <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">top-start</span>
              </span>
              </label>
              <label for="placement-top" class="Radio">
                <input type="radio" name="placement" value="top" id="placement-top" class="Radio__input" />
                <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">top</span>
              </span>
              </label>
              <label for="placement-top-end" class="Radio">
                <input type="radio" name="placement" value="top-end" id="placement-top-end" class="Radio__input" />
                <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">top-end</span>
              </span>
              </label>

            </div>
            <div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 3">

              <label for="placement-bottom-start" class="Radio">
                <input type="radio" name="placement" value="bottom-start" id="placement-bottom-start" class="Radio__input" />
                <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">bottom-start</span>
              </span>
              </label>
              <label for="placement-bottom" class="Radio">
                <input type="radio" name="placement" value="bottom" id="placement-bottom" class="Radio__input" checked />
                <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">bottom</span>
              </span>
              </label>
              <label for="placement-bottom-end" class="Radio">
                <input type="radio" name="placement" value="bottom-end" id="placement-bottom-end" class="Radio__input" />
                <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">bottom-end</span>
              </span>
              </label>

            </div>
            <div
              class="GridItem"
              style="
              --grid-item-column-start: 1;
              --grid-item-row-start: 2;
              display: flex;
              flex-direction: column;
              justify-self: start;
            "
            >

              <label for="placement-left-start" class="Radio">
                <input type="radio" name="placement" value="left-start" id="placement-left-start" class="Radio__input" />
                <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">left-start</span>
              </span>
              </label>
              <label for="placement-left" class="Radio">
                <input type="radio" name="placement" value="left" id="placement-left" class="Radio__input" />
                <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">left</span>
              </span>
              </label>
              <label for="placement-left-end" class="Radio">
                <input type="radio" name="placement" value="left-end" id="placement-left-end" class="Radio__input" />
                <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">left-end</span>
              </span>
              </label>

            </div>
            <div
              class="GridItem"
              style="
              --grid-item-column-start: 3;
              --grid-item-row-start: 2;
              display: flex;
              flex-direction: column;
              justify-self: end;
            "
            >

              <label for="placement-right-start" class="Radio">
                <input type="radio" name="placement" value="right-start" id="placement-right-start" class="Radio__input" />
                <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">right-start</span>
              </span>
              </label>
              <label for="placement-right" class="Radio">
                <input type="radio" name="placement" value="right" id="placement-right" class="Radio__input" />
                <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">right</span>
              </span>
              </label>
              <label for="placement-right-end" class="Radio">
                <input type="radio" name="placement" value="right-end" id="placement-right-end" class="Radio__input" />
                <span class="Radio__text">
                <span class="Radio__label Radio__label--hidden">right-end</span>
              </span>
              </label>

            </div>
            <div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 2">

              <div class="Tooltip mx-auto my-1600" data-spirit-element="tooltip">
                <div class="docs-Box px-1100 py-1100" >
                  Click<br />
                  the dots!
                </div>
                <div class="TooltipPopover" id="tooltip-placements-example" data-spirit-placement="bottom" data-spirit-trigger="click" data-spirit-enable-flipping="false">
                  <span id="tooltip-placements-example-text">bottom</span>
                  <span class="TooltipPopover__arrow" data-spirit-element="arrow"></span>
                </div>
              </div>

            </div>
          </div>
        </form>

      </div>

    </div>

  </section>

  <section class="UNSTABLE_Section">

    <div class="Container">

      <h2 class="docs-Heading">Advanced Floating Functionality</h2>

      <div class="docs-Stack docs-Stack--stretch">

        <script type="module" src="floating-ui-example.mjs" rel="preload" as="script"></script>

        <style>
          .example-viewport {
            width: 100%;
            max-width: 100%;
            height: 30rem;
            overflow: auto;
          }

          .example-content {
            position: relative;
            width: 300%;
            height: 90rem;
            padding-block: 44rem;
            text-align: center;
          }
        </style>

        <p class="mb-700">
          Try scrolling the frame or resizing the window to see how the Tooltip behaves. The Floating UI
          library is trying to keep the Tooltip in the viewport and it is also flipping, shifting and
          resizing the Tooltip when it is not possible to keep it in the viewport.
        </p>

        <div class="Grid Grid--cols-1 Grid--tablet--cols-4 mb-700">
          <div>
            <label for="my-advanced-flip" class="Checkbox">
              <input type="checkbox" id="my-advanced-flip" class="Checkbox__input" name="advanced-flip" checked />
              <span class="Checkbox__text">
              <span class="Checkbox__label">Enable flipping</span>
            </span>
            </label>
          </div>
          <div>
            <label for="my-advanced-flip-cross-axis" class="Checkbox">
              <input type="checkbox" id="my-advanced-flip-cross-axis" class="Checkbox__input" name="advanced-flip-cross-axis" checked />
              <span class="Checkbox__text">
              <span class="Checkbox__label">Enable flipping cross axis</span>
            </span>
            </label>
          </div>
          <div>
            <label for="my-advanced-shift" class="Checkbox">
              <input type="checkbox" id="my-advanced-shift" class="Checkbox__input" name="advanced-shift" checked />
              <span class="Checkbox__text">
              <span class="Checkbox__label">Enable shifting</span>
            </span>
            </label>
          </div>
          <div>
            <label for="my-advanced-size" class="Checkbox">
              <input type="checkbox" id="my-advanced-size" class="Checkbox__input" name="advanced-size" checked />
              <span class="Checkbox__text">
              <span class="Checkbox__label">Enable sizing</span>
            </span>
            </label>
          </div>
        </div>
        <div class="Grid Grid--cols-1 Grid--tablet--cols-2 mb-700">
          <div class="Select">
            <label for="my-advanced-select" class="Select__label">Suggested placement</label>
            <div class="Select__inputContainer">
              <select id="my-advanced-select" name="advanced-placement" class="Select__input">
                <option value="top-start" selected>top-start</option>
                <option value="top">top</option>
                <option value="top-end">top-end</option>
                <option value="right-start">right-start</option>
                <option value="right">right</option>
                <option value="right-end">right-end</option>
                <option value="bottom-start">bottom-start</option>
                <option value="bottom">bottom</option>
                <option value="bottom-end">bottom-end</option>
                <option value="left-start">left-start</option>
                <option value="left">left</option>
                <option value="left-end">left-end</option>
              </select>
              <div class="Select__icon">
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
                </svg>
              </div>
            </div>
          </div>
          <div class="Select">
            <label for="my-advanced-select-fallback" class="Select__label">Suggested fallback placements</label>
            <div class="Select__inputContainer">
              <select id="my-advanced-select-fallback" name="advanced-placement-fallback" class="Select__input">
                <option value="top, right, bottom" selected>top, right, bottom</option>
                <option value="top, left, bottom">top, left, bottom</option>
                <option value="top, left, right, bottom">top, left, right, bottom</option>
                <option value="bottom, right, top">bottom, right, top</option>
                <option value="top, bottom">top, bottom</option>
                <option value="top, bottom">bottom, top</option>
              </select>
              <div class="Select__icon">
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
                </svg>
              </div>
            </div>
          </div>
        </div>

        <div class="example-viewport bg-secondary" id="my-advanced-viewport">
          <div class="example-content" id="my-advanced-content">

            <div class="Tooltip d-inline-block" data-spirit-element="tooltip">

              <button
                type="button"
                class="Button Button--primary Button--medium"
                aria-describedby="my-advanced-tooltip"
                data-spirit-toggle="tooltip"
                data-spirit-target="#my-advanced-tooltip"
              >
                I have a tooltip 😎
              </button>
              <div
                id="my-advanced-tooltip"
                class="TooltipPopover TooltipPopover--dismissible"
                data-spirit-enable-flipping="true"
                data-spirit-enable-shifting="true"
                data-spirit-enable-sizing="true"
                data-spirit-placement="top-start"
                data-spirit-enable-flipping-cross-axis="true"
                data-spirit-flip-fallback-placements="top, right, bottom"
              >
                This long tooltip is flipping, resizing and shifting to stay in the viewport. Also its arrow is always trying to point to the center of the trigger.
                <button
                  type="button"
                  class="TooltipPopover__close"
                  data-spirit-dismiss="tooltip"
                  data-spirit-target="#my-advanced-tooltip"
                  aria-controls="my-advanced-tooltip"
                  aria-expanded="true"
                >
                  <svg width="24" height="24" aria-hidden="true">
                    <use xlink:href="/assets/icons/svg/sprite.svg#close" />
                  </svg>
                  <span class="accessibility-hidden">Close</span>
                </button>
                <span class="TooltipPopover__arrow" data-spirit-element="arrow"></span>
              </div>

            </div>

          </div>
        </div>

      </div>

    </div>

  </section>

{{/ web/layout/default }}