ak-ui · ak-ui

Popover 与 Tooltip 基于浏览器 Popover API。打开状态由 :popover-open 表达，不维护第二套 JavaScript 状态。

SOURCE / HTML

html

<button
  class="ak-button ak-button--action"
  type="button"
  popovertarget="deployment-popover"
  style="anchor-name: --deployment-anchor"
>
  <span class="ak-button__label">查看部署情报</span>
</button>

<aside
  class="ak-popover"
  id="deployment-popover"
  popover
  style="position-anchor: --deployment-anchor"
>
  <span class="ak-popover__eyebrow">Deployment / Intel</span>
  <strong class="ak-popover__title">高台单位优先</strong>
  <p class="ak-popover__content">入口左侧可覆盖两条路径，建议预留 18 点部署费用。</p>
</aside>

<button
  class="ak-button"
  type="button"
  aria-describedby="deployment-cost-tooltip"
  aria-label="查看部署费用说明"
  data-tooltip-trigger
  style="anchor-name: --tooltip-anchor"
>
  <span class="ak-button__label">部署费用</span>
</button>

<span
  class="ak-tooltip"
  id="deployment-cost-tooltip"
  popover="manual"
  role="tooltip"
  style="position-anchor: --tooltip-anchor"
>
  单位入场时消耗的战术资源
</span>

<script>
const tooltipTrigger = document.querySelector('[data-tooltip-trigger]')
const tooltip = document.querySelector('#deployment-cost-tooltip')

function showTooltip() {
  if (!tooltip.matches(':popover-open'))
    tooltip.showPopover()
}

function hideTooltip() {
  if (tooltip.matches(':popover-open'))
    tooltip.hidePopover()
}

tooltipTrigger.addEventListener('pointerenter', showTooltip)
tooltipTrigger.addEventListener('pointerleave', hideTooltip)
tooltipTrigger.addEventListener('focus', showTooltip)
tooltipTrigger.addEventListener('blur', hideTooltip)
</script>

普通信息浮层使用 popover 与 popovertarget 即可完成点击打开、轻触外部关闭和 Escape 关闭。支持 CSS Anchor Positioning 的浏览器会按触发元素定位；其他浏览器保持可用的居中回退。

Popover 公开 --ak-popover-signal 与 --ak-popover-info；Tooltip 可通过 --ak-tooltip-signal 调整边框信号色。

Tooltip 使用 popover="manual"，由触发元素的 hover 与 focus 事件调用 showPopover() / hidePopover()。务必同时支持键盘焦点，并使用 aria-describedby 关联说明内容。

ak-popover 浮层 ​

Popover ​

Tooltip ​

ak-popover 浮层

Popover

Tooltip