[OP-123] Tooltip on disabled button (#219)

This PR adds some documentation for how to use a tooltip on a disabled button

.storybook/documentation.scss

@@ -19,6 +19,10 @@ html {
   color: var(--op-color-on-background);
 }
 
+.sbdocs .sb-button-fix button {
+  height: 0;
+}
+
 // Allow the "Show Code" button to appear above the footer in examples.
 .docs-story div:last-child {
   z-index: 1;

src/stories/Components/Tooltip/Tooltip.mdx

@@ -39,6 +39,23 @@ Tooltip can be used as a standalone component, however, it does have a few depen
 @import '@rolemodel/optics/dist/scss/components/tooltip';
 ```
 
+## Note on usage with Button
+
+There are cases when you might want to put a tooltip on a disabled [Button](?path=/docs/navigation-components-button--docs). Unfortunately due to the implementation of button which prioritizes simpler and easier to customize code, the hover is blocked which causes the tooltip to not show up.
+The workaround for this is to wrap your disabled button in a span and put the tooltip on the span instead.
+
+<span className="sb-button-fix" data-tooltip-text="This is a tooltip">
+  <button className="btn" disabled>
+    Disabled Button
+  </button>
+</span>
+
+```html
+<span data-tooltip-text="This is a tooltip">
+  <button class="btn" disabled>Disabled Button</button>
+</span>
+```
+
 ## Variations
 
 ### Default