@highlight-ui/tooltip - npm Package Compare versions

Comparing version 3.3.46 to 3.3.47

dist/cjs/index.js

@@ -53,3 +53,3 @@ 'use strict';
   "offsetVarName": "--tooltip-offset",
-  "tooltip": "Tooltip-module__wN2gX2dn__v3-3-46"
+  "tooltip": "Tooltip-module__wN2gX2dn__v3-3-47"
 };
@@ -56,0 +56,0 @@ var Trigger = React__default["default"].forwardRef(function (_a, ref) {

dist/esm/index.js

@@ -42,3 +42,3 @@ import React, { cloneElement } from 'react';
   "offsetVarName": "--tooltip-offset",
-  "tooltip": "Tooltip-module__wN2gX2dn__v3-3-46"
+  "tooltip": "Tooltip-module__wN2gX2dn__v3-3-47"
 };
@@ -45,0 +45,0 @@ var Trigger = /*#__PURE__*/React.forwardRef(function (_a, ref) {

package.json

 {
   "name": "@highlight-ui/tooltip",
-  "version": "3.3.46",
+  "version": "3.3.47",
   "author": "Personio GmbH & Co. KG",
@@ -29,4 +29,4 @@ "main": "dist/cjs/index.js",
   "devDependencies": {
-    "@highlight-ui/alert": "^6.0.3",
-    "@highlight-ui/button": "^12.0.3",
+    "@highlight-ui/alert": "^6.0.4",
+    "@highlight-ui/button": "^12.0.4",
     "@highlight-ui/configs-base-jest": "^3.1.2",
@@ -45,3 +45,3 @@ "@highlight-ui/configs-base-tsconfig": "^3.2.1",
   "dependencies": {
-    "@highlight-ui/typography": "^6.0.0",
+    "@highlight-ui/typography": "^6.0.1",
     "@highlight-ui/utils-commons": "^2.3.8",
@@ -55,3 +55,3 @@ "@highlight-ui/utils-hooks": "^3.2.21",
   },
-  "gitHead": "51a5201361862dac280c11639ff2dd6d0453aa88"
+  "gitHead": "e350b6a3203165c887f553b3f2bb0b286f392dbf"
 }

README.md

@@ -1,15 +0,23 @@
-# `@highlight-ui/tooltip`
+[![npm](https://img.shields.io/npm/v/@highlight-ui/tooltip)](https://www.npmjs.com/package/@highlight-ui/tooltip)
+[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/338a72-tooltip/b/61d4aa)
+[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/feedback-tooltip--basic-tooltip)
 
-## Installation
+# @highlight-ui/tooltip
 
+Using npm:
+
+```bash
+npm install @highlight-ui/tooltip
 ```
+
+Using yarn:
+
+```bash
 yarn add @highlight-ui/tooltip
 ```
 
-## Usage
+Using pnpm:
 
-In your TypeScript file:
-
-```ts
-import { Tooltip, TooltipProps } from '@highlight-ui/tooltip';
+```bash
+pnpm install @highlight-ui/tooltip
 ```
@@ -23,4 +31,51 @@
 
-## Documentation
+Once the package is installed, you can import the library:
 
-Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/338a72-tooltip)
+```ts
+import { Tooltip } from '@highlight-ui/tooltip';
+```
+
+## Usage
+
+```tsx
+import React from 'react';
+import { Tooltip } from '@highlight-ui/tooltip';
+
+export default function TooltipExample() {
+  return (
+    <Tooltip
+      content={<span>This is the tooltip text.</span>}
+      placement="top"
+      interactive
+    >
+      <b>Hover me</b>
+    </Tooltip>
+  );
+}
+```
+
+## Props 📜
+
+| Prop              | Type                               | Required | Default | Description                                                                                                     |
+| :---------------- | :--------------------------------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------- |
+| `content`         | `React.ReactNode`                  | Yes      |         | Content rendered inside the tooltip pop-up                                                                      |
+| `children`        | `React.ReactNode`                  | Yes      |         | The element which triggers the tooltip pop-up                                                                   |
+| `id`              | `string`                           | No       |         | id of the tooltip                                                                                               |
+| `component`       | `'span', 'div'`                    | No       | `span`  | Create custom trigger element                                                                                   |
+| `mouseEnterDelay` | `MouseDelayVariant`                | No       | `none`  | Mouse enter delay specifying how long a tooltip takes before becoming visible                                   |
+| `mouseOutDelay`   | `MouseDelayVariant`                | No       | `none`  | Mouse out delay specifying how long a tooltip stays visible after hovering out                                  |
+| `placement`       | `'top', 'left', 'bottom', 'right'` | No       | `top`   | Placement of the tooltip                                                                                        |
+| `interactive`     | `boolean`                          | No       | `true`  | Whether tooltip text stays visible when user moves the pointer over its content (requires long `mouseOutDelay`) |
+| `className`       | `string`                           | No       |         | Allows providing a custom class name                                                                            |
+
+### Custom types 🔠
+
+| Type                | Values                     | Description                                                                                        |
+| :------------------ | :------------------------- | :------------------------------------------------------------------------------------------------- |
+| `MouseDelayVariant` | `'none', 'medium', 'long'` | Used by the `mouseEnterDelay` and `mouseOutDelay` props. `none` = 0, `medium` = 375, `long` = 1000 |
+
+## Contributing 🖌️
+
+Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/338a72-tooltip/b/61d4aa) for usage guidelines and visual examples.
+
+If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66604

increased by5.97%

Number of lines in readme file

81

increased by211.54%

Dependency changes

• Updated@highlight-ui/typography@^6.0.1