chore(react): improve tooltip story

packages/react/src/components/message/Tooltip/Tooltip.stories.tsx

@@ -1,15 +1,54 @@
 import React from "react";
+import { StoryTemplate } from "src/components/helpers";
 
 import Text from "../../asorted/Text";
 import FlexBox from "../../layout/Flex";
 import TooltipComponent, { Props } from "./index";
 
+const description = `
+### Tooltips display informative text when users hover over an element.
+
+This component is based on [tippyjs](https://atomiks.github.io/tippyjs/) which is powerful library.
+Please check [the documentation](https://github.com/atomiks/tippyjs-react#-props) for the full props list and usage.
+
+## Usage
+
+\`\`\`js
+
+import { Tooltip } from "@ledgerhq/react-ui"
+
+\`\`\`
+
+Wrap some jsx that will make the tooltip visible on mouse over.<br/>
+_**Note:** this jsx will automatically be wrapped inside a \`span\` element if the ref cannot be forwarded. \
+See [here](https://github.com/atomiks/tippyjs-react#component-children) for a detailed explanation._
+
+To set the tooltip inner contents, use the \`content\` prop.
+
+\`\`\`js
+<Tooltip content="Hello!" {...props}>
+  <div>Hover me</div>
+</Tooltip>
+\`\`\`
+
+## Sandbox
+
+Placement, style and content can be customized using props as demonstrated in the following example.
+`;
+
 export default {
   title: "Messages/Tooltip",
   component: TooltipComponent,
+  parameters: {
+    docs: {
+      description: {
+        component: description,
+      },
+    },
+  },
   argTypes: {
     content: { type: "string", defaultValue: "Hello World!" },
-    visible: { type: "boolean" },
+    visible: { options: [true, false, undefined] },
     disabled: { type: "boolean" },
     placement: {
       control: { type: "radio" },
@@ -34,10 +73,10 @@ export default {
   },
 };
 
-export const Tooltip = (args: Props): JSX.Element => (
-  <FlexBox alignItems="center" justifyContent="center" style={{ height: "100vh" }}>
+export const Tooltip: StoryTemplate<Props> = (args) => (
+  <FlexBox alignItems="center" justifyContent="center">
     <TooltipComponent {...args}>
-      <div style={{ padding: "5px" }}>
+      <div style={{ margin: "50px" }}>
         <Text
           as="div"
           fontWeight="semiBold"

packages/react/src/components/message/Tooltip/index.tsx

@@ -22,10 +22,10 @@ type Placement =
 
 // Add more props later on if needed.
 // See https://atomiks.github.io/tippyjs/v6/all-props for the full list.
-export type Props = TippyProps & {
-  /* The preferred placement of the tippy. */
+export interface Props extends TippyProps {
+  /** The preferred placement of the tippy. */
   placement?: Placement;
-};
+}
 
 // Tippyjs need the ref to be forwarded to the DOM element wrapping the children.
 // This component has been created to add a wrapping span and use its ref when needed.