@scm-manager/ui-overlays 2.40.2-20230016-130104

package/.storybook/RemoveThemesPlugin.js

@@ -0,0 +1,57 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+class RemoveThemesPlugin {
+  apply (compiler) {
+    compiler.hooks.compilation.tap('RemoveThemesPlugin', (compilation) => {
+
+      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(
+        'RemoveThemesPlugin',
+        (data, cb) => {
+          
+          // remove generated style-loader bundles from the page
+          // there should be a better way, which does not generate the bundles at all
+          // but for now it works
+          if (data.assets.js) {
+            data.assets.js = data.assets.js.filter(bundle => !bundle.startsWith("ui-theme-"))
+                                           .filter(bundle => !bundle.startsWith("runtime~ui-theme-"))
+          }
+
+          // remove css links to avoid conflicts with the themes
+          // so we remove all and add our own via preview-head.html
+          if (data.assets.css) {
+            data.assets.css = data.assets.css.filter(css => !css.startsWith("ui-theme-"))
+          }
+
+          // Tell webpack to move on
+          cb(null, data)
+        }
+      )
+    })
+  }
+}
+
+module.exports = RemoveThemesPlugin

package/.storybook/main.js

@@ -0,0 +1,89 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const path = require("path");
+const fs = require("fs");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const RemoveThemesPlugin = require("./RemoveThemesPlugin");
+
+const root = path.resolve("..");
+
+const themedir = path.join(root, "ui-styles", "src");
+
+const themes = fs
+  .readdirSync(themedir)
+  .map((filename) => path.parse(filename))
+  .filter((p) => p.ext === ".scss")
+  .reduce((entries, current) => ({ ...entries, [`ui-theme-${current.name}`]: path.join(themedir, current.base) }), {});
+
+module.exports = {
+  typescript: { reactDocgen: false },
+  core: {
+    builder: "webpack5",
+  },
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+  addons: [
+    "storybook-addon-i18next",
+    "storybook-addon-themes",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
+    "storybook-addon-pseudo-states",
+    "storybook-addon-mock",
+  ],
+  framework: "@storybook/react",
+  webpackFinal: async (config) => {
+    // add our themes to webpack entry points
+    config.entry = {
+      main: config.entry,
+      ...themes,
+    };
+
+    // create separate css files for our themes
+    config.plugins.push(
+      new MiniCssExtractPlugin({
+        filename: "[name].css",
+        ignoreOrder: false,
+      })
+    );
+
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+    });
+
+    // the html-webpack-plugin adds the generated css and js files to the iframe,
+    // which overrides our manually loaded css files.
+    // So we use a custom plugin which uses a hook of html-webpack-plugin
+    // to filter our themes from the output.
+    config.plugins.push(new RemoveThemesPlugin());
+
+    // force cjs instead of esm
+    // https://github.com/tannerlinsley/react-query/issues/3513
+    config.resolve.alias["react-query/devtools"] = require.resolve("react-query/devtools");
+
+    return config;
+  },
+};

package/.storybook/preview-head.html

@@ -0,0 +1,26 @@
+<!--
+    MIT License
+
+    Copyright (c) 2020-present Cloudogu GmbH and Contributors
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.
+-->
+
+<link id="ui-theme" data-theme="light" rel="stylesheet" type="text/css" href="/ui-theme-light.css">
+

package/.storybook/preview.js

@@ -0,0 +1,72 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { useEffect } from "react";
+import { I18nextProvider, initReactI18next } from "react-i18next";
+import i18n from "i18next";
+
+i18n.use(initReactI18next).init({
+  whitelist: ["en", "de"],
+  lng: "en",
+  fallbackLng: "en",
+  interpolation: {
+    escapeValue: false,
+  },
+  react: {
+    useSuspense: false,
+  },
+
+});
+
+const Decorator = ({ children, themeName }) => {
+  useEffect(() => {
+    const link = document.querySelector("#ui-theme");
+    if (link && link["data-theme"] !== themeName) {
+      link.href = `ui-theme-${themeName}.css`;
+      link["data-theme"] = themeName;
+    }
+  }, [themeName]);
+  return <>{children}</>;
+};
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  decorators: [
+    (Story) => (
+      <I18nextProvider i18n={i18n}>
+        <Story />
+      </I18nextProvider>
+    ),
+  ],
+  themes: {
+    Decorator,
+    clearable: false,
+    default: "light",
+    list: [
+      { name: "light", color: "#fff" },
+      { name: "highcontrast", color: "#050514" },
+      { name: "dark", color: "#121212" },
+    ],
+  },
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,15 @@
+@scm-manager/ui-overlays:build: cache hit, replaying output 5ab67f515d27c6b4
+@scm-manager/ui-overlays:build: $ tsup ./src/index.ts -d build --format esm,cjs --dts
+@scm-manager/ui-overlays:build: CLI Building entry: ./src/index.ts
+@scm-manager/ui-overlays:build: CLI Using tsconfig: tsconfig.json
+@scm-manager/ui-overlays:build: CLI tsup v6.2.3
+@scm-manager/ui-overlays:build: CLI Target: node14
+@scm-manager/ui-overlays:build: ESM Build start
+@scm-manager/ui-overlays:build: CJS Build start
+@scm-manager/ui-overlays:build: ESM build/index.mjs 1.26 KB
+@scm-manager/ui-overlays:build: ESM ⚡️ Build success in 115ms
+@scm-manager/ui-overlays:build: CJS build/index.js 2.80 KB
+@scm-manager/ui-overlays:build: CJS ⚡️ Build success in 86ms
+@scm-manager/ui-overlays:build: DTS Build start
+@scm-manager/ui-overlays:build: DTS ⚡️ Build success in 8242ms
+@scm-manager/ui-overlays:build: DTS build/index.d.ts 831.00 B

package/build/index.d.ts

@@ -0,0 +1,26 @@
+import React, { ReactNode, ReactElement } from 'react';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+
+/**
+ * Displays the given {@link Props#message} whenever the provided {@link Props#children} is hovered or focused.
+ *
+ * @since 2.41.0
+ * @beta
+ */
+declare const Tooltip: React.ForwardRefExoticComponent<{
+    /**
+     * The message to be displayed in the overlay.
+     */
+    message: ReactNode;
+    /**
+     * It is required to provide a {@link ReactElement} as the single child because listeners and metadata is going to be
+     * attached to it automatically.
+     */
+    children: ReactElement;
+    /**
+     * Class to be applied to the content container.
+     */
+    className?: string | undefined;
+} & Pick<RadixTooltip.TooltipContentProps, "side"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Tooltip };

package/build/index.js

@@ -0,0 +1,73 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Tooltip: () => Tooltip_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/tooltip/Tooltip.tsx
+var import_react = __toESM(require("react"));
+var RadixTooltip = __toESM(require("@radix-ui/react-tooltip"));
+var import_classnames = __toESM(require("classnames"));
+var import_styled_components = __toESM(require("styled-components"));
+var StyledContent = (0, import_styled_components.default)(RadixTooltip.Content)`
+  overflow: hidden;
+  hyphens: auto;
+  text-overflow: clip;
+  white-space: pre-wrap;
+  max-width: 15rem;
+  word-break: keep-all;
+  z-index: 1020;
+`;
+var StyledArrow = (0, import_styled_components.default)(RadixTooltip.Arrow)`
+  z-index: 1020;
+`;
+var Tooltip = import_react.default.forwardRef(({ children, className, message, side }, ref) => /* @__PURE__ */ import_react.default.createElement(RadixTooltip.Provider, null, /* @__PURE__ */ import_react.default.createElement(RadixTooltip.Root, null, /* @__PURE__ */ import_react.default.createElement(RadixTooltip.Trigger, {
+  asChild: true
+}, children), /* @__PURE__ */ import_react.default.createElement(RadixTooltip.Portal, null, /* @__PURE__ */ import_react.default.createElement(StyledContent, {
+  className: (0, import_classnames.default)(
+    "is-size-7",
+    "is-family-primary",
+    "has-rounded-border",
+    "has-text-white",
+    "has-background-grey-dark",
+    "has-text-weight-semibold",
+    "p-2",
+    className
+  ),
+  side,
+  sideOffset: 5,
+  ref
+}, message, /* @__PURE__ */ import_react.default.createElement(StyledArrow, {
+  className: "tooltip-arrow-fill-color"
+}))))));
+var Tooltip_default = Tooltip;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tooltip
+});

package/build/index.mjs

@@ -0,0 +1,40 @@
+// src/tooltip/Tooltip.tsx
+import React from "react";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+import classNames from "classnames";
+import styled from "styled-components";
+var StyledContent = styled(RadixTooltip.Content)`
+  overflow: hidden;
+  hyphens: auto;
+  text-overflow: clip;
+  white-space: pre-wrap;
+  max-width: 15rem;
+  word-break: keep-all;
+  z-index: 1020;
+`;
+var StyledArrow = styled(RadixTooltip.Arrow)`
+  z-index: 1020;
+`;
+var Tooltip = React.forwardRef(({ children, className, message, side }, ref) => /* @__PURE__ */ React.createElement(RadixTooltip.Provider, null, /* @__PURE__ */ React.createElement(RadixTooltip.Root, null, /* @__PURE__ */ React.createElement(RadixTooltip.Trigger, {
+  asChild: true
+}, children), /* @__PURE__ */ React.createElement(RadixTooltip.Portal, null, /* @__PURE__ */ React.createElement(StyledContent, {
+  className: classNames(
+    "is-size-7",
+    "is-family-primary",
+    "has-rounded-border",
+    "has-text-white",
+    "has-background-grey-dark",
+    "has-text-weight-semibold",
+    "p-2",
+    className
+  ),
+  side,
+  sideOffset: 5,
+  ref
+}, message, /* @__PURE__ */ React.createElement(StyledArrow, {
+  className: "tooltip-arrow-fill-color"
+}))))));
+var Tooltip_default = Tooltip;
+export {
+  Tooltip_default as Tooltip
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@scm-manager/ui-overlays",
+  "private": false,
+  "version": "2.40.2-20230016-130104",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "module": "build/index.mjs",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup ./src/index.ts -d build --format esm,cjs --dts",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.0",
+    "@scm-manager/eslint-config": "^2.16.0",
+    "@scm-manager/prettier-config": "^2.10.1",
+    "@scm-manager/tsconfig": "^2.13.0",
+    "@scm-manager/ui-styles": "2.40.2-20230016-130104",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-docs": "^6.5.14",
+    "babel-loader": "^8.2.5",
+    "storybook-addon-mock": "^3.2.0",
+    "storybook-addon-themes": "^6.1.0",
+    "tsup": "^6.2.3"
+  },
+  "peerDependencies": {
+    "classnames": "^2.3.1",
+    "react": "17",
+    "styled-components": "^5.3.6"
+  },
+  "dependencies": {
+    "@radix-ui/react-tooltip": "1.0.2"
+  },
+  "prettier": "@scm-manager/prettier-config",
+  "eslintConfig": {
+    "extends": "@scm-manager/eslint-config"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export { default as Tooltip } from "./tooltip/Tooltip";

package/src/tooltip/Tooltip.examples.js

@@ -0,0 +1,41 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export const LongText =
+  "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";
+
+export const ShortList = `  * a
+  * b
+  * c
+`;
+
+export const List = `  Characters:
+
+    - Arthur Dent
+    - Ford Prefect
+    - Zaphod Beeblebrox
+    - Marvin the Paranoid Android
+    - Trillian
+    - Slartibartfast
+`;

package/src/tooltip/Tooltip.stories.mdx

@@ -0,0 +1,52 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import Tooltip from "./Tooltip"
+import { List, LongText, ShortList } from "./Tooltip.examples";
+
+<Meta title="Tooltip"/>
+
+Here will be some documentation for the Tooltip component.
+
+<Story name="Default">
+  <Tooltip message="I am a tooltip!">
+    <button>Hover me</button>
+  </Tooltip>
+</Story>
+
+<Story name="With Styling">
+  <Tooltip message="I am a tooltip!" className="has-text-warning">
+    <button>Hover me</button>
+  </Tooltip>
+</Story>
+
+<Story name="Long Text">
+  <Tooltip
+    message={LongText}>
+    <button>Hover me</button>
+  </Tooltip>
+</Story>
+
+<Story name="List">
+  <Tooltip message={List}>
+    <button>Hover me</button>
+  </Tooltip>
+</Story>
+
+<Story name="Short List">
+  <Tooltip message={ShortList}>
+    <button>Hover me</button>
+  </Tooltip>
+</Story>
+
+<Story name="With Link">
+  <Tooltip message={<p>
+    For more information look up the documentation on the <a href="https://scm-manager.org">SCM-Manager</a> Website.
+  </p>}>
+    <button>Hover me</button>
+  </Tooltip>
+</Story>
+
+<Story name="Adjust Position">
+  <Tooltip message="I should show where there is space" side="left">
+    <button>Hover me</button>
+  </Tooltip>
+</Story>

package/src/tooltip/Tooltip.tsx

@@ -0,0 +1,95 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ReactElement, ReactNode } from "react";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+import classNames from "classnames";
+import styled from "styled-components";
+
+const StyledContent = styled(RadixTooltip.Content)`
+  overflow: hidden;
+  hyphens: auto;
+  text-overflow: clip;
+  white-space: pre-wrap;
+  max-width: 15rem;
+  word-break: keep-all;
+  z-index: 1020;
+`;
+
+const StyledArrow = styled(RadixTooltip.Arrow)`
+  z-index: 1020;
+`;
+
+type Props = {
+  /**
+   * The message to be displayed in the overlay.
+   */
+  message: ReactNode;
+
+  /**
+   * It is required to provide a {@link ReactElement} as the single child because listeners and metadata is going to be
+   * attached to it automatically.
+   */
+  children: ReactElement;
+
+  /**
+   * Class to be applied to the content container.
+   */
+  className?: string;
+} & Pick<RadixTooltip.TooltipContentProps, "side">;
+
+/**
+ * Displays the given {@link Props#message} whenever the provided {@link Props#children} is hovered or focused.
+ *
+ * @since 2.41.0
+ * @beta
+ */
+const Tooltip = React.forwardRef<HTMLDivElement, Props>(({ children, className, message, side }, ref) => (
+  <RadixTooltip.Provider>
+    <RadixTooltip.Root>
+      <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
+      <RadixTooltip.Portal>
+        <StyledContent
+          className={classNames(
+            "is-size-7",
+            "is-family-primary",
+            "has-rounded-border",
+            "has-text-white",
+            "has-background-grey-dark",
+            "has-text-weight-semibold",
+            "p-2",
+            className
+          )}
+          side={side}
+          sideOffset={5}
+          ref={ref}
+        >
+          {message}
+          <StyledArrow className="tooltip-arrow-fill-color" />
+        </StyledContent>
+      </RadixTooltip.Portal>
+    </RadixTooltip.Root>
+  </RadixTooltip.Provider>
+));
+export default Tooltip;

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@scm-manager/tsconfig"
+}