4.3.3 • Published 2 months ago

@highlight-ui/tooltip v4.3.3

Weekly downloads
-
License
MIT
Repository
-
Last release
2 months ago

npm personio.design storybook.personio.design

@highlight-ui/tooltip

Using npm:

npm install @highlight-ui/tooltip

Using yarn:

yarn add @highlight-ui/tooltip

Using pnpm:

pnpm install @highlight-ui/tooltip

In your (S)CSS file:

@import url('@highlight-ui/tooltip');

Once the package is installed, you can import the library:

import { Tooltip } from '@highlight-ui/tooltip';

Usage

import React from 'react';
import { Tooltip } from '@highlight-ui/tooltip';

export default function TooltipExample() {
  return (
    <Tooltip
      content={<Body>This is the tooltip text.</Body>}
      placement="top"
      interactive
    >
      <b>Hover me</b>
    </Tooltip>
  );
}

Props 📜

PropTypeRequiredDefaultDescription
contentReact.ReactNodeYesContent rendered inside the tooltip pop-up
childrenReact.ReactNodeYesThe element which triggers the tooltip pop-up
idstringNoid of the tooltip
component'span', 'div'NospanCreate custom trigger element
mouseEnterDelayMouseDelayVariantNononeMouse enter delay specifying how long a tooltip takes before becoming visible
mouseOutDelayMouseDelayVariantNononeMouse out delay specifying how long a tooltip stays visible after hovering out
placement'top', 'left', 'bottom', 'right'NotopPlacement of the tooltip
interactivebooleanNotrueWhether tooltip text stays visible when user moves the pointer over its content (requires long mouseOutDelay)
classNamestringNoAllows providing a custom class name

Custom types 🔠

TypeValuesDescription
MouseDelayVariant'none', 'medium', 'long'Used by the mouseEnterDelay and mouseOutDelay props. none = 0, medium = 375, long = 1000

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.

@highlight-ui/utils-commons@highlight-ui/utils-hooks@highlight-ui/utils-portal-manager@popperjs/core
@infinitebrahmanuniverse/nolb-_hig@everything-registry/sub-chunk-395@zalastax/nolb-_hig@highlight-ui/dialog@highlight-ui/file-management@highlight-ui/form-field@highlight-ui/toggle-input@highlight-ui/sandbox-form-field
4.3.3

2 months ago

4.3.2

3 months ago

4.3.1

5 months ago

4.3.0

5 months ago

4.2.3

5 months ago

4.1.8

9 months ago

4.1.7

10 months ago

4.1.9

9 months ago

4.1.20

7 months ago

4.0.4

10 months ago

4.1.21

7 months ago

4.1.22

7 months ago

4.0.1

10 months ago

4.0.0

10 months ago

4.0.3

10 months ago

4.0.2

10 months ago

4.1.23

7 months ago

3.3.47

10 months ago

4.2.2

7 months ago

4.2.1

7 months ago

4.2.0

7 months ago

4.1.10

9 months ago

4.1.11

9 months ago

4.1.16

8 months ago

4.1.17

8 months ago

4.1.18

8 months ago

4.1.19

8 months ago

4.1.12

9 months ago

4.1.13

9 months ago

4.1.14

9 months ago

4.1.15

8 months ago

4.1.4

10 months ago

4.1.3

10 months ago

4.1.6

10 months ago

4.1.5

10 months ago

4.1.0

10 months ago

4.1.2

10 months ago

4.1.1

10 months ago

4.2.0-r18.0

8 months ago

3.3.37

12 months ago

3.3.38

12 months ago

3.3.39

12 months ago

3.3.46

11 months ago

3.3.40

12 months ago

3.3.41

12 months ago

3.3.42

11 months ago

3.3.43

11 months ago

3.3.44

11 months ago

3.3.45

11 months ago

3.3.35

1 year ago

3.3.36

1 year ago

3.3.31

1 year ago

3.3.32

1 year ago

3.3.33

1 year ago

3.3.34

1 year ago

3.3.30

1 year ago

3.3.24

1 year ago

3.3.25

1 year ago

3.3.26

1 year ago

3.3.27

1 year ago

3.3.28

1 year ago

3.3.29

1 year ago

3.3.9

1 year ago

3.3.8

1 year ago

3.3.7

1 year ago

3.3.6

1 year ago

3.2.2

1 year ago

3.2.1

1 year ago

3.2.0

1 year ago

3.1.3

1 year ago

3.1.2

1 year ago

3.1.1

1 year ago

3.1.0

1 year ago

3.3.13

1 year ago

3.3.14

1 year ago

3.3.15

1 year ago

3.3.16

1 year ago

3.3.17

1 year ago

3.3.18

1 year ago

3.3.19

1 year ago

3.3.10

1 year ago

3.3.11

1 year ago

3.3.12

1 year ago

3.3.1

1 year ago

3.3.0

1 year ago

3.3.5

1 year ago

3.3.4

1 year ago

3.3.3

1 year ago

3.3.2

1 year ago

3.3.20

1 year ago

3.3.21

1 year ago

3.0.31

1 year ago

3.3.22

1 year ago

3.3.23

1 year ago

3.0.23

2 years ago

3.0.24

2 years ago

3.0.21

2 years ago

3.0.22

2 years ago

3.0.27

2 years ago

3.0.25

2 years ago

3.0.26

2 years ago

3.0.29

2 years ago

3.0.16

2 years ago

3.0.17

2 years ago

3.0.20

2 years ago

3.0.18

2 years ago

3.0.19

2 years ago

3.0.0-alpha.1

2 years ago

3.0.12

2 years ago

3.0.4

2 years ago

3.0.13

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.11

2 years ago

3.0.1

2 years ago

3.0.8

2 years ago

3.0.7

2 years ago

3.0.14

2 years ago

3.0.6

2 years ago

3.0.15

2 years ago

3.0.5

2 years ago

3.0.0

2 years ago

3.0.9

2 years ago

3.0.0-alpha.0

2 years ago

2.0.36

2 years ago

2.1.2

2 years ago

2.1.1

2 years ago

2.1.0

2 years ago

2.0.35

2 years ago

2.0.33

2 years ago

2.0.34

2 years ago

2.0.31

2 years ago

2.0.32

2 years ago

2.0.28

2 years ago

2.0.29

2 years ago

2.0.30

2 years ago

2.0.26

2 years ago

2.0.27

2 years ago

2.0.24

3 years ago

2.0.25

3 years ago

2.0.22

3 years ago

2.0.23

3 years ago

2.0.21

3 years ago

2.0.20

3 years ago

2.0.19

3 years ago

2.0.18

3 years ago

2.0.16

3 years ago

2.0.17

3 years ago

2.0.15

3 years ago

2.0.14

3 years ago

2.0.13

3 years ago

2.0.12

3 years ago

2.0.11

3 years ago

2.0.9

3 years ago

2.0.10

3 years ago

2.0.8

3 years ago

2.0.7

3 years ago

2.0.6

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

1.1.9

3 years ago

1.1.8

3 years ago

1.1.12

3 years ago

1.1.11

3 years ago

1.1.10

3 years ago

2.0.0

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.1

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.0

3 years ago