Tooltip

<span class="zui-tooltip">
<button class="zui-button" style="anchor-name: --tooltip-demo" data-tooltip-trigger="tooltip-demo">Hover me</button>
<span popover="manual" id="tooltip-demo" class="zui-tooltip-content zui-tooltip-placement-top" style="position-anchor: --tooltip-demo" role="tooltip">Helpful information</span>
</span>

<script>
document.querySelectorAll('[data-tooltip-trigger]').forEach((trigger) => {
  const popover = document.getElementById(trigger.dataset.tooltipTrigger)
  if (!popover) return
  trigger.addEventListener('mouseenter', () => popover.showPopover())
  trigger.addEventListener('mouseleave', () => popover.hidePopover())
  trigger.addEventListener('focus', () => popover.showPopover())
  trigger.addEventListener('blur', () => popover.hidePopover())
})
</script>

import { Tooltip, Button } from '@mrmartineau/zui/react'

<Tooltip text="Helpful information">
<Button>Hover me</Button>
</Tooltip>

---
import { Tooltip, Button } from '@mrmartineau/zui/astro'
---

<Tooltip text="Helpful information">
<Button>Hover me</Button>
</Tooltip>

import { Tooltip, Button } from '@mrmartineau/zui/solid'

<Tooltip text="Helpful information">
<Button>Hover me</Button>
</Tooltip>

<script lang="ts">
import { Tooltip, Button } from '@mrmartineau/zui/svelte'
</script>

<Tooltip text="Helpful information">
<Button>Hover me</Button>
</Tooltip>

<template>
<Tooltip text="Helpful information">
  <Button>Hover me</Button>
</Tooltip>
</template>

<script setup>
import { Tooltip, Button } from '@mrmartineau/zui/vue'
</script>

<!-- Top (default) -->
<span class="zui-tooltip">
<button class="zui-button" style="anchor-name: --tt-top" data-tooltip-trigger="tt-top">Top</button>
<span popover="manual" id="tt-top" class="zui-tooltip-content zui-tooltip-placement-top" style="position-anchor: --tt-top" role="tooltip">Appears above</span>
</span>

<!-- Bottom -->
<span class="zui-tooltip">
<button class="zui-button" style="anchor-name: --tt-bottom" data-tooltip-trigger="tt-bottom">Bottom</button>
<span popover="manual" id="tt-bottom" class="zui-tooltip-content zui-tooltip-placement-bottom" style="position-anchor: --tt-bottom" role="tooltip">Appears below</span>
</span>

<!-- Left -->
<span class="zui-tooltip">
<button class="zui-button" style="anchor-name: --tt-left" data-tooltip-trigger="tt-left">Left</button>
<span popover="manual" id="tt-left" class="zui-tooltip-content zui-tooltip-placement-left" style="position-anchor: --tt-left" role="tooltip">Appears left</span>
</span>

<!-- Right -->
<span class="zui-tooltip">
<button class="zui-button" style="anchor-name: --tt-right" data-tooltip-trigger="tt-right">Right</button>
<span popover="manual" id="tt-right" class="zui-tooltip-content zui-tooltip-placement-right" style="position-anchor: --tt-right" role="tooltip">Appears right</span>
</span>

<script>
document.querySelectorAll('[data-tooltip-trigger]').forEach((trigger) => {
  const popover = document.getElementById(trigger.dataset.tooltipTrigger)
  if (!popover) return
  trigger.addEventListener('mouseenter', () => popover.showPopover())
  trigger.addEventListener('mouseleave', () => popover.hidePopover())
  trigger.addEventListener('focus', () => popover.showPopover())
  trigger.addEventListener('blur', () => popover.hidePopover())
})
</script>

import { Tooltip, Button } from '@mrmartineau/zui/react'

<Tooltip text="Appears above">
<Button>Top</Button>
</Tooltip>

<Tooltip text="Appears below" placement="bottom">
<Button>Bottom</Button>
</Tooltip>

<Tooltip text="Appears left" placement="left">
<Button>Left</Button>
</Tooltip>

<Tooltip text="Appears right" placement="right">
<Button>Right</Button>
</Tooltip>

---
import { Tooltip, Button } from '@mrmartineau/zui/astro'
---

<Tooltip text="Appears above"><Button>Top</Button></Tooltip>
<Tooltip text="Appears below" placement="bottom"><Button>Bottom</Button></Tooltip>
<Tooltip text="Appears left" placement="left"><Button>Left</Button></Tooltip>
<Tooltip text="Appears right" placement="right"><Button>Right</Button></Tooltip>

import { Tooltip, Button } from '@mrmartineau/zui/solid'

<Tooltip text="Appears above">
<Button>Top</Button>
</Tooltip>

<Tooltip text="Appears below" placement="bottom">
<Button>Bottom</Button>
</Tooltip>

<Tooltip text="Appears left" placement="left">
<Button>Left</Button>
</Tooltip>

<Tooltip text="Appears right" placement="right">
<Button>Right</Button>
</Tooltip>

<script lang="ts">
import { Tooltip, Button } from '@mrmartineau/zui/svelte'
</script>

<Tooltip text="Appears above">
<Button>Top</Button>
</Tooltip>

<Tooltip text="Appears below" placement="bottom">
<Button>Bottom</Button>
</Tooltip>

<Tooltip text="Appears left" placement="left">
<Button>Left</Button>
</Tooltip>

<Tooltip text="Appears right" placement="right">
<Button>Right</Button>
</Tooltip>

<template>
<Tooltip text="Appears above">
  <Button>Top</Button>
</Tooltip>

<Tooltip text="Appears below" placement="bottom">
  <Button>Bottom</Button>
</Tooltip>

<Tooltip text="Appears left" placement="left">
  <Button>Left</Button>
</Tooltip>

<Tooltip text="Appears right" placement="right">
  <Button>Right</Button>
</Tooltip>
</template>

<script setup>
import { Tooltip, Button } from '@mrmartineau/zui/vue'
</script>