Create button tooltip component

Summary

Currently there is no simple way to add a tooltip to a button. However it is a demand of many services (at least our one: SQL Query) to give users a hint of what a button is going to achieve.

The only current solution is to wrap a tooltip (more specifically <TooltipDefinition>) around a button:

    <div className="button">
      <TooltipDefinition
        tooltipText="this is going to happen when you click"
        direction="bottom"
        alignment="right"
      >
        <Button>A button</Button>
      </TooltipDefinition>
    </div>

While this works in principle it produces a number of errors in the browser:

1. Warning: Failed prop type: Invalid prop 'children' of type 'object' supplied to 'TooltipDefinition', expected 'string', due to

...
TooltipDefinition.propTypes = {
  /**
   * Specify the tooltip trigger text that is rendered to the UI for the user to
   * interact with in order to display the tooltip.
   */
  children: _propTypes.default.string.isRequired,
...

1. Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button> This is due to the fact that the tooltip itself is creating a <button> into which we are wrapping another button.

A native button tooltip would avoid these issues. I assume design (in case the button tooltip should be different from other tooltips) and development (css, implementation for react…) would be required to solve this issue.

Justification

There is currently no suitable alternatives.

Desired UX and success metrics

“Must have” functionality

Hovering over a button should show a tooltip similar to the Definition Tooltip (i.e. multiline possible).

Specific timeline issues / requests

SQL Query is currently moving to carbon components (this sprint). Current solution using Definition Tooltip is not satisfying because of browser errors

Available extra resources

What resources do you have to assist this effort?

Here is a codesandbox which highlights what i mean: https://codesandbox.io/s/rw4w26kkzp. (I also briefly tried to create a Vanilla-JS version of a multi-line botton tooltip which does not seem to work solely based on the predefined styles: see last button)

[shixiedesign]

@asudoh Nooo why would i be against it?! 😂Please add it 🎉 this is clearly useful knowledge!

[gmoehler]

For reference: this is what i am currently using (until 10.3 is out): https://codesandbox.io/s/buttonwithtooltipref-b2wqn (added own trigger styles and right aligned styles from master branch)