Tooltip

example

code

import { Tooltip, Button } from 'charcell/react';

export function TooltipExample() {
  return (
    <Tooltip
      trigger={({ triggerProps }) => <Button {...triggerProps} label="?" />}
    >
      road combat tips
    </Tooltip>
  );
}

<script setup lang="ts">
import { Tooltip, Button } from 'charcell/vue';
</script>

<template>
  <Tooltip>
    road combat tips
    <template #trigger="{ triggerProps }">
      <Button v-bind="triggerProps" label="?" />
    </template>
  </Tooltip>
</template>

<script lang="ts">
  import { Tooltip, Button } from 'charcell/svelte';
</script>

<Tooltip>
  road combat tips
  {#snippet trigger({ triggerProps })}
    <Button {...triggerProps} label="?" />
  {/snippet}
</Tooltip>

<!-- component: TooltipDriver (behavior not included) --><button
  class="CharcellButton CharcellButton--boxed CharcellButton--interactive"
  type="button"
>
  ?</button
><!-- /component -->

import { Tooltip, Button } from 'charcell/react';

export function TooltipExample() {
  return (
    <Tooltip
      placement="right"
      trigger={({ triggerProps }) => <Button {...triggerProps} label="?" />}
    >
      road combat tips
    </Tooltip>
  );
}

<script setup lang="ts">
import { Tooltip, Button } from 'charcell/vue';
</script>

<template>
  <Tooltip placement="right">
    road combat tips
    <template #trigger="{ triggerProps }">
      <Button v-bind="triggerProps" label="?" />
    </template>
  </Tooltip>
</template>

<script lang="ts">
  import { Tooltip, Button } from 'charcell/svelte';
</script>

<Tooltip placement="right">
  road combat tips
  {#snippet trigger({ triggerProps })}
    <Button {...triggerProps} label="?" />
  {/snippet}
</Tooltip>

<!-- component: TooltipDriver (behavior not included) --><button
  class="CharcellButton CharcellButton--boxed CharcellButton--interactive"
  type="button"
>
  ?</button
><!-- /component -->

as text

at rest

┌───┐
│ ? │
└───┘
┌──────────────────┐
│ road combat tips │
└──────────────────┘

hover

┌───┐
│ ? │
└───┘
┌──────────────────┐
│ road combat tips │
└──────────────────┘

press

┌───┐
│ ? │
└───┘
┌──────────────────┐
│ road combat tips │
└──────────────────┘

focus

┌───┐
│❯? │
└───┘
┌──────────────────┐
│ road combat tips │
└──────────────────┘

props

direction'ltr' | 'rtl': The reading direction its keys and placement follow ('rtl' mirrors the arrow keys); the page's, once mounted, when unset.
placementPlacement: Where the hint opens against its control, as a Zag placement ('bottom-start' when unset).
openDelaynumber= 400: Milliseconds the pointer rests on the control before the hint opens.
closeDelaynumber= 150: Milliseconds the hint stays after the pointer leaves.
interactiveboolean= true: The hint stays while the pointer is over it, so its text can be read and selected under a magnifier (on by default; false closes it as the pointer leaves the trigger).
triggerIdstring: The id of the control the hint explains, when another part owns it: a Popover's button, whose id the Popover finds it by. Spread both parts' trigger props on that one control.
openboolean: Controlled open state; pair it with onOpenChange.; binds with v-model:open in vue, bind:open in svelte
defaultOpenboolean: Uncontrolled initial open state.
onOpenChange(open: boolean) => void: Called with the next open state whenever the hint opens or closes.

slots

in react, the default slot is children and each named slot a prop of its name, a function where the slot hands values; in vue, a slot; in svelte, a snippet.

trigger{ triggerProps: Record<string, unknown> }its values required: The control the hint describes: spread triggerProps onto it.
default: The hint.

usage

example

code

as text

props

slots