Ark UI

Usage

Start by importing the necessary components from the package:

import {
  Portal,
  Tooltip,
  TooltipArrow,
  TooltipArrowTip,
  TooltipContent,
  TooltipPositioner,
  TooltipPresence,
  TooltipTrigger,
} from '@ark-ui/react'

Here is a basic example:

import { Portal, Tooltip, TooltipContent, TooltipPositioner, TooltipTrigger } from '@ark-ui/react'

const Basic = () => (
  <Tooltip>
    <TooltipTrigger>Hover Me</TooltipTrigger>
    <Portal>
      <TooltipPositioner>
        <TooltipContent>I am a tooltip!</TooltipContent>
      </TooltipPositioner>
    </Portal>
  </Tooltip>
)

import { Tooltip, TooltipContent, TooltipPositioner, TooltipTrigger } from '@ark-ui/solid'
import { Portal } from 'solid-js/web'

const Basic = () => (
  <Tooltip>
    <TooltipTrigger>Hover Me</TooltipTrigger>
    <Portal>
      <TooltipPositioner>
        <TooltipContent>I am a tooltip!</TooltipContent>
      </TooltipPositioner>
    </Portal>
  </Tooltip>
)

<script setup lang="ts">
import { Tooltip, TooltipContent, TooltipPositioner, TooltipTrigger } from '.'
</script>

<template>
  <Tooltip>
    <TooltipTrigger>Hover Me</TooltipTrigger>
    <TooltipPositioner>
      <TooltipContent>I am a tooltip!</TooltipContent>
    </TooltipPositioner>
  </Tooltip>
</template>

Using a Render Function

For more control over the Tooltip’s functionality, you can use a function as a child, which provides access to the Tooltip API:

import { Portal, Tooltip, TooltipContent, TooltipPositioner, TooltipTrigger } from '@ark-ui/react'

const RenderFn = () => (
  <Tooltip>
    {({ isOpen }) => (
      <>
        <TooltipTrigger>Hover Me</TooltipTrigger>
        <Portal>
          <TooltipPositioner>
            <TooltipContent>This tooltip is open: {isOpen.toString()}</TooltipContent>
          </TooltipPositioner>
        </Portal>
      </>
    )}
  </Tooltip>
)

Story not available

Story not available

To create a controlled Tooltip component, manage the state of whether the tooltip is open using the open prop:

import { Portal, Tooltip, TooltipContent, TooltipPositioner, TooltipTrigger } from '@ark-ui/react'
import { useState } from 'react'

const Controlled = () => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      <Tooltip open={isOpen}>
        <TooltipTrigger>Hover Me</TooltipTrigger>
        <Portal>
          <TooltipPositioner>
            <TooltipContent>I am a tooltip!</TooltipContent>
          </TooltipPositioner>
        </Portal>
      </Tooltip>
    </>
  )
}

import { Tooltip, TooltipContent, TooltipPositioner, TooltipTrigger } from '@ark-ui/solid'
import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'

const Controlled = () => {
  const [isOpen, setIsOpen] = createSignal(false)
  return (
    <>
      <button onClick={() => setIsOpen(!isOpen())}>Toggle</button>
      <Tooltip open={isOpen()}>
        <TooltipTrigger>Hover Me</TooltipTrigger>
        <Portal>
          <TooltipPositioner>
            <TooltipContent>I am a tooltip!</TooltipContent>
          </TooltipPositioner>
        </Portal>
      </Tooltip>
    </>
  )
}

Story not available

Adding an Arrow

To display an arrow pointing to the trigger from the tooltip, use the TooltipArrow and TooltipArrowTip components:

import {
  Portal,
  Tooltip,
  TooltipArrow,
  TooltipArrowTip,
  TooltipContent,
  TooltipPositioner,
  TooltipTrigger,
} from '@ark-ui/react'

const Arrow = () => (
  <Tooltip>
    <TooltipTrigger>Hove Me</TooltipTrigger>
    <Portal>
      <TooltipPositioner>
        <TooltipContent>
          <TooltipArrow>
            <TooltipArrowTip />
          </TooltipArrow>
          I am a tooltip!
        </TooltipContent>
      </TooltipPositioner>
    </Portal>
  </Tooltip>
)

import {
  Tooltip,
  TooltipArrow,
  TooltipArrowTip,
  TooltipContent,
  TooltipPositioner,
  TooltipTrigger,
} from '@ark-ui/solid'
import { Portal } from 'solid-js/web'

const Arrow = () => (
  <Tooltip>
    <TooltipTrigger>Hove Me</TooltipTrigger>
    <Portal>
      <TooltipPositioner>
        <TooltipArrow>
          <TooltipArrowTip />
        </TooltipArrow>
        <TooltipContent>I am a tooltip!</TooltipContent>
      </TooltipPositioner>
    </Portal>
  </Tooltip>
)

Story not available

Configuring Delay Timings

To configure the delay timings for the Tooltip, use the closeDelay and openDelay props:

import { Portal, Tooltip, TooltipContent, TooltipPositioner, TooltipTrigger } from '@ark-ui/react'

const Timings = () => (
  <Tooltip closeDelay={0} openDelay={0}>
    <TooltipTrigger>Hover Me</TooltipTrigger>
    <Portal>
      <TooltipPositioner>
        <TooltipContent>I am a tooltip!</TooltipContent>
      </TooltipPositioner>
    </Portal>
  </Tooltip>
)

import { Tooltip, TooltipContent, TooltipPositioner, TooltipTrigger } from '@ark-ui/solid'
import { Portal } from 'solid-js/web'

const Timings = () => (
  <Tooltip closeDelay={0} openDelay={0}>
    <TooltipTrigger>Hover Me</TooltipTrigger>
    <Portal>
      <TooltipPositioner>
        <TooltipContent>I am a tooltip!</TooltipContent>
      </TooltipPositioner>
    </Portal>
  </Tooltip>
)

Story not available

Custom Positioning

To customize the position of the Tooltip relative to the trigger, use the positioning prop:

import { Portal, Tooltip, TooltipContent, TooltipPositioner, TooltipTrigger } from '@ark-ui/react'

const Positioning = () => (
  <Tooltip
    positioning={{ placement: 'left-start', gutter: 16, offset: { mainAxis: 12, crossAxis: 12 } }}
  >
    <TooltipTrigger>Hover Me</TooltipTrigger>
    <Portal>
      <TooltipPositioner>
        <TooltipContent>I am a tooltip!</TooltipContent>
      </TooltipPositioner>
    </Portal>
  </Tooltip>
)

import { Tooltip, TooltipContent, TooltipPositioner, TooltipTrigger } from '@ark-ui/solid'
import { Portal } from 'solid-js/web'

const Positioning = () => (
  <Tooltip
    positioning={{ placement: 'left-start', gutter: 16, offset: { mainAxis: 12, crossAxis: 12 } }}
  >
    <TooltipTrigger>Hover Me</TooltipTrigger>
    <Portal>
      <TooltipPositioner>
        <TooltipContent>I am a tooltip!</TooltipContent>
      </TooltipPositioner>
    </Portal>
  </Tooltip>
)

Story not available

Conclusion

The Tooltip component offers an effective way to present additional information to users in a sleek and unobtrusive manner. Its wide range of configuration options ensure that it can adapt to any UI design or user interaction needs.

Tooltip