Tooltip

• For providing additional context to the user.

import { Tooltip } from '@viamrobotics/prime-core';

Default

This is some helpful but not critical information

<div class="flex">
  <Tooltip let:tooltipID>
    <Icon
      aria-describedby={tooltipID}
      name="information-outline"
      cx="cursor-pointer text-gray-6"
    />
    <p slot="description">This is some helpful but not critical information</p>
  </Tooltip>
</div>

Hover delay

More actions

<div class="flex">
  <Tooltip
    let:tooltipID
    hoverDelayMS={1000}
  >
    <IconButton
      aria-describedby={tooltipID}
      icon="dots-horizontal"
      label="More actions"
    />
    <p slot="description">More actions</p>
  </Tooltip>
</div>