Tooltip

Allows user to show small information on hover an element.

version

4.2.0

install

yarn add @welcome-ui/tooltip

usage

import { Tooltip } from '@welcome-ui/tooltip'

View package View source

Usage #

The tooltip follows the cursor.


<Tooltip content="🔥🔥🔥🔥🔥🔥🔥">
  <Button>Show a beautiful tooltip 🔥</Button>
</Tooltip>

Maybe you don't want the tooltip to follow the cursor…


<Tooltip fixed content="🔥🔥🔥🔥🔥🔥🔥">
  <Button>Show a beautiful fixed tooltip 🔥</Button>
</Tooltip>

With a long text and a custom placement #

Set a max-width for long text


<Tooltip
  placement="bottom-start"
  content={<div>lorem ipsum dolor sit amet, consectetur adipiscing elit</div>}
>
  <span>With long text</span>
</Tooltip>

Properties #

Name	Type(s)	Default	Required
content	string Element
fixed	Boolean
placement	"top" "right" "bottom" "left" "auto-start" "auto" "auto-end" "top-start" "top-end" "right-start" "right-end" "bottom-end" "bottom-start" "left-end" "left-start"

Packages #

Dependencies #

@welcome-ui/system [^4.2.0]

popper.js [^1.16.1]

reakit [^1.3.11]

Peer dependencies #

@xstyled/styled-components [^3.6.0]

react [^16.10.2 || ^17.0.1 || ^18.0.0]

styled-components [^5.3.3]

Popover

Breadcrumb