Pikas UI

@pikas-ui/tooltip

This package contains a tooltip component that can be used to display a tooltip on hover or focus.

This library is based on Radix Ui.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/tooltip

yarn add @pikas-ui/tooltip

pnpm add @pikas-ui/tooltip

Usage

Tooltip

The tooltip component is used to display a tooltip on hover or focus.

import { Tooltip } from '@pikas-ui/tooltip';
import { IconByName } from '@pikas-ui/icons';

const Example: React.FC = () => {
  return (
    <Tooltip content="Hello world">
      <IconByName size={40} name="bx:baguette" />
    </Tooltip>
  );
};

Props

Prop	Description	Type	Default
`content`	Tooltip content	`string or ReactNode`	-
`children`	Trigger element	`ReactNode`	-
`backgroundColorName`	Background color	`PikasColors`	`"white"`
`open`	Open state	`boolean`	-
`defaultOpen`	Default open	`boolean`	-
`onOpenChange`	Event handler	`(open: boolean) => void`	-
`delayDuration`	Delay duration	`number`	-
`skipDelayDuration`	Skip delay duration	`number`	-
`hasArrow`	Has arrow indicator	`boolean`	`true`
`arrowSize`	Arrow size	`number`	`10`
`arrowOffset`	Arrow offset	`number`	`8`
`side`	Side of the tooltip	`TooltipSide`	-
`sideOffset`	Side offset of the tooltip	`number`	-
`align`	Align of content	`TooltipAlign`	-
`alignOffset`	Align offset	`number`	-
`avoidCollisions`	Avoid collisions	`boolean`	`true`
`collisionPadding`	Collision tolerance of the tooltip	`number`	-
`borderRadius`	Border radius of the tooltip	`PikasRadius`	`"md"`
`fontSize`	Font size of content	`PikasFontSize`	`"em-small"`
`fontWeight`	Font weight of content	`PikasFontWeight`	-
`boxShadow`	Box shadow of the tooltip	`PikasShadow`	`"bottom-md"`
`padding`	Padding of the tooltip	`TooltipPadding`	`"md"`
`css`	Custom css	`TooltipCSS`	-

Contributing

This documentation can be edited on GitHub here