Add tooltip component (#2843)

* Add Tooltip component to common

Will be used to provide backwards compatibility when we switch to CSS tooltips.

All other methods of creating tooltips are deprecated and this component-based method should be used instead.

* Modify direct child instead of using container element

Instead of using a container to house the tooltip, we'll now modify the
first direct child of the Tooltip component.

The Tooltip component will ensure that:
- children are passed to it
- only one child is present
- that child is an actual HTML Element and not a text node, or similar
- that child is currently present in the DOM

Only after all of the above are satisfied, will the tooltip be created
on that element. We store a reference to the DOM node that the tooltip
should be created on, then use this to perform tooltip actions via
jQuery. If this element gets changes (e.g. the tooltip content is
updated to another element) then the tooltip will be recreated.

If any of the first 3 requirements are not satisfied, an error will
be thrown to alert the developer to their misuse of this component.

To make this work, we do need to overwrite the title attribute of
the element with the tooltip, but this is the only solution other than
specifying `title` as an option when making the tooltip, but this is
not accessible by screenreaders unless they simulate a hover on the
element.

* Add warning about component overwriting `title` attr

* Update previous uses of Tooltip component

js/@types/tooltips/index.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Selection of options accepted by [Bootstrap's tooltips](https://getbootstrap.com/docs/3.3/javascript/#tooltips-options).
+ *
+ * ---
+ *
+ * Not all options are present from Bootstrap to discourage the use of options
+ * that will be deprecated in the future.
+ *
+ * More commonly used options that will be deprecated remain, but are marked as
+ * such.
+ *
+ * @see https://getbootstrap.com/docs/3.3/javascript/#tooltips-options
+ */
+export interface TooltipCreationOptions {
+  /**
+   * Whether HTML content is allowed in the tooltip.
+   *
+   * ---
+   *
+   * **Warning:** this is a possible XSS attack vector. This option shouldn't
+   * be used wherever possible, and will not work when we migrate to CSS-only
+   * tooltips.
+   *
+   * @deprecated
+   */
+  html?: boolean;
+  /**
+   * Tooltip position around the target element.
+   */
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Sets the delay between a trigger state occurring and the tooltip appearing
+   * on-screen.
+   *
+   * ---
+   *
+   * **Warning:** this option will be removed when we switch to CSS-only
+   * tooltips.
+   *
+   * @deprecated
+   */
+  delay?: number;
+  /**
+   * Value used if no `title` attribute is present on the HTML element.
+   *
+   * If a function is given, it will be called with its `this` reference set to
+   * the element that the tooltip is attached to.
+   */
+  title?: string;
+  /**
+   * How the tooltip is triggered.
+   *
+   * Either on `hover`, on `hover focus` (either of the two).
+   *
+   * ---
+   *
+   * **Warning:** `manual`, `click` and `focus` on its own are deprecated options
+   * which will not be supported in the future.
+   */
+  trigger?: 'hover' | 'hover focus';
+}
+
+/**
+ * Creates a tooltip on a jQuery element reference.
+ *
+ * Returns the same jQuery reference to allow for method chaining.
+ */
+export type TooltipJQueryFunction = (tooltipOptions?: TooltipCreationOptions | 'destroy' | 'show' | 'hide') => JQuery;