Add ability to show tooltips for buttons

packages/dante2/docs/tooltips.mdx

@@ -213,3 +213,21 @@ The default options for dante tooltip are:
   widgets={[CustomWidgetconfig()]}
 />
 ```
+
+## Add a popper to the button
+
+```js live=true
+<Dante
+  content={null}
+  tooltips={[
+    DanteInlineTooltipConfig({
+      fixed: true,
+    }),
+  ]}
+  widgets={[CustomWidgetconfig({ popper: { name: "Left", placement: "left" }}), 
+            CustomWidgetconfig({ popper: { name: "Top", placement: "top" }}),
+            CustomWidgetconfig({ popper: { name: "Bottom (default)", placement: "bottom" }}),
+            CustomWidgetconfig({ popper: { name: "Right", placement: "right" }}),
+            CustomWidgetconfig({ popper: { name: "Offset", placement: "bottom", offset: [8, 15] }})]}
+/>
+```

packages/dante2/package.json

@@ -48,6 +48,7 @@
     "react-colorful": "^5.1.2",
     "react-dev-utils": "^11.0.4",
     "react-popper": "^1.0.0",
+    "react-popper-tooltip": "^4.4.2",
     "react-select": "^2.0.0",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-multi-input": "^1.3.1"

packages/dante2/src/editor/components/popovers/addButton.js

@@ -8,6 +8,8 @@ import {
 } from "../../model/index.js";
 
 import { getVisibleSelectionRect } from "draft-js";
+import { usePopperTooltip } from "react-popper-tooltip";
+import 'react-popper-tooltip/dist/styles.css';
 
 import {
   getSelectionRect,
@@ -343,27 +345,49 @@ export default class DanteInlineTooltip extends React.Component {
   }
 }
 
-class InlineTooltipItem extends React.Component {
-  clickHandler = (e) => {
+function InlineTooltipItem ({ item: { type, popper, icon } , clickHandler, title }) {
+  const onClick = (e) => {
     e.preventDefault();
-    return this.props.clickHandler(e, this.props.item.type);
+    return clickHandler(e, type);
   };
 
-  render() {
-    return (
+  const popperPlacement = popper && popper.placement ? popper.placement : "bottom"
+  const popperOffset = popper && popper.offset ? popper.offset : [0, 7]
+
+  const {
+    getArrowProps,
+    getTooltipProps,
+    setTooltipRef,
+    setTriggerRef,
+    visible,
+  } = usePopperTooltip({ placement: popperPlacement, offset: popperOffset });
+
+  return (
+    <div className="button-container">
       <button
+        ref={setTriggerRef}
         type="button"
         className="inlineTooltip-button scale"
-        title={this.props.title}
-        data-cy={`inline-tooltip-button-${this.props.item.type}`}
-        onMouseDown={this.clickHandler}
+        title={title}
+        data-cy={`inline-tooltip-button-${type}`}
+        onMouseDown={onClick}
         onClick={(e) => e.preventDefault()}
         style={{ fontSize: "21px" }}
       >
-        {<span className={"tooltip-icon"}>{this.props.item.icon()}</span>}
+        {<span className={"tooltip-icon"}>{icon()}</span>}
       </button>
-    );
-  }
+      {(popper && visible) && (
+        <div
+          ref={setTooltipRef}
+          {...getTooltipProps({ className: 'tooltip-container', style: { fontSize: "12px", borderRadius: "5px" } })}
+        >
+          <div {...getArrowProps({ className: 'tooltip-arrow' })} />
+          {popper && popper.name}
+        </div>
+      )}
+    </div>
+  );
+
 }
 
 export const DanteInlineTooltipConfig = (options = {}) => {

packages/dante2/src/editor/styled/base.js

@@ -623,6 +623,10 @@ export const InlinetooltipWrapper = styled.div`
   }
 
   // BUTTON
+  .button-container {
+    display: inline-block;
+  }
+
   .inlineTooltip-button {
 
     // BASE