Source code

src/showcase/pages/components/tooltip.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Demonstrate the tooltips component on its own lazy route.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="componentCatalog" class="component-library">
  <include
    src="partials/components/page-header.html"
    locals='{"title":"componentTooltip"}'
  ></include>
  <div class="catalog-grid">
    <article class="card catalog-overflow">
      <header class="card-header"><h2 x-text="$t('componentTooltip')"></h2></header>
      <div class="card-body">
        <div
          class="ui-tooltip-host"
          x-data="uiDropdown"
          x-id="['tip']"
          @mouseenter="open = true"
          @mouseleave="open = false"
          @keydown.escape.stop="close"
        >
          <button
            class="btn btn-secondary"
            x-ref="trigger"
            @focus="open = true"
            @blur="open = false"
            :aria-describedby="$id('tip')"
            x-text="$t('galleryTooltip')"
          ></button>
          <span
            class="ui-tooltip"
            role="tooltip"
            :id="$id('tip')"
            x-show="open"
            x-cloak
            x-text="$t('galleryTooltipText')"
          ></span>
        </div>
      </div>
    </article>
  </div>
</section>