From 5f87af127558c5104e7983cc20997f5d670fafa6 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Fri, 7 May 2021 20:49:53 +0100
Subject: [PATCH 01/38] 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.
---
 js/src/common/components/Tooltip.tsx | 97 ++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 js/src/common/components/Tooltip.tsx

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
new file mode 100644
index 0000000000..04dcf1f956
--- /dev/null
+++ b/js/src/common/components/Tooltip.tsx
@@ -0,0 +1,97 @@
+import Component, { ComponentAttrs } from '../Component';
+import type Mithril from 'mithril';
+import classList from '../utils/classList';
+
+export interface TooltipAttrs extends ComponentAttrs {
+  /**
+   * Tooltip textual content.
+   */
+  text: string;
+  /**
+   * If inline, uses a `<span>` container, else uses a `<div>`.
+   *
+   * Default: `false`.
+   */
+  inline?: boolean;
+  /**
+   * Manually show tooltip. `false` will show based on cursor events.
+   *
+   * Default: `false`.
+   */
+  tooltipVisible?: boolean;
+  /**
+   * Whether to show on focus.
+   *
+   * Default: `true`.
+   */
+  showOnFocus?: boolean;
+  /**
+   * Tooltip position around element.
+   */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * 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;
+}
+
+/**
+ * The `Tooltip` component is used to create a tooltip for an element. It
+ * surrounds it with a div (or span) which has the required tooltip setup
+ * applied.
+ *
+ * You should use this for any tooltips you create to allow for backwards
+ * compatibility when we switch to pure CSS tooltips instead of Bootstrap
+ * tooltips.
+ *
+ * @example <caption>Correct use of Tooltip component</caption>
+ *          <Tooltip text="You wish!">
+ *            <Button>
+ *              Click for free money!
+ *            </Button>
+ *          </Tooltip>
+ *
+ * @example <caption>Correct use of Tooltip component</caption>
+ *          <Tooltip text="Replies from xxx, yyy, zzz and more.">
+ *            <div>3 replies</div>
+ *          </Tooltip>
+ */
+export default class Tooltip extends Component<TooltipAttrs> {
+  view(vnode: Mithril.Vnode<TooltipAttrs, this>) {
+    const { children } = vnode;
+
+    const {
+      text,
+      inline,
+      tooltipVisible,
+      showOnFocus = true,
+      position = 'top',
+      // This will have no effect when switching to CSS tooltips
+      html = false,
+      ...attrs
+    } = this.attrs;
+
+    attrs['aria-label'] = text;
+
+    // https://getbootstrap.com/docs/3.3/javascript/#tooltips-options
+    this.$.tooltip({
+      html,
+      placement: position,
+      title: text,
+      // Fancy "hack" to assemble the trigger string
+      trigger: classList('hover', [showOnFocus && 'focus']),
+    });
+
+    if (inline) {
+      return <span {...attrs}>{children}</span>;
+    }
+
+    return <div {...attrs}>{children}</div>;
+  }
+}

From c68fd51036aca8c38daf2c7894cb91f5e934bbfa Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Fri, 7 May 2021 20:50:29 +0100
Subject: [PATCH 02/38] Export Tooltip component

---
 js/src/common/compat.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/src/common/compat.js b/js/src/common/compat.js
index c640038caa..5fe1017a95 100644
--- a/js/src/common/compat.js
+++ b/js/src/common/compat.js
@@ -62,6 +62,7 @@ import GroupBadge from './components/GroupBadge';
 import TextEditor from './components/TextEditor';
 import TextEditorButton from './components/TextEditorButton';
 import EditUserModal from './components/EditUserModal';
+import Tooltip from './components/Tooltip';
 import Model from './Model';
 import Application from './Application';
 import fullTime from './helpers/fullTime';
@@ -141,6 +142,7 @@ export default {
   'components/GroupBadge': GroupBadge,
   'components/TextEditor': TextEditor,
   'components/TextEditorButton': TextEditorButton,
+  'components/Tooltip': Tooltip,
   'components/EditUserModal': EditUserModal,
   Model: Model,
   Application: Application,

From 7d93c9d87db9ac71c9125cf7858cb5f0e28ffb35 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sat, 8 May 2021 18:17:50 +0100
Subject: [PATCH 03/38] WIP

---
 js/src/common/components/Badge.js    | 15 ++++++++------
 js/src/common/components/Tooltip.tsx | 31 +++++++++++++++++++++-------
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/js/src/common/components/Badge.js b/js/src/common/components/Badge.js
index d9267fdf32..fbe05f7cd7 100644
--- a/js/src/common/components/Badge.js
+++ b/js/src/common/components/Badge.js
@@ -1,6 +1,6 @@
 import Component from '../Component';
+import Tooltip from '../Tooltip';
 import icon from '../helpers/icon';
-import extract from '../utils/extract';
 
 /**
  * The `Badge` component represents a user/discussion badge, indicating some
@@ -18,13 +18,16 @@ import extract from '../utils/extract';
 export default class Badge extends Component {
   view() {
     const attrs = Object.assign({}, this.attrs);
-    const type = extract(attrs, 'type');
-    const iconName = extract(attrs, 'icon');
 
-    attrs.className = 'Badge ' + (type ? 'Badge--' + type : '') + ' ' + (attrs.className || '');
-    attrs.title = extract(attrs, 'label') || '';
+    const { type, icon: iconName, title = '' } = attrs;
 
-    return <span {...attrs}>{iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;')}</span>;
+    const className = classList('Badge', [type && `Badge--${type}`], attrs.className);
+
+    return (
+      <Tooltip text={title} {...attrs} className={className}>
+        {iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;')}
+      </Tooltip>
+    );
   }
 
   oncreate(vnode) {
diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 04dcf1f956..a5485062f7 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -63,9 +63,30 @@ export interface TooltipAttrs extends ComponentAttrs {
  *          </Tooltip>
  */
 export default class Tooltip extends Component<TooltipAttrs> {
-  view(vnode: Mithril.Vnode<TooltipAttrs, this>) {
+  view(vnode) {
     const { children } = vnode;
 
+    // We remove these to get the remaining attrs to pass to the DOM element
+    const { text, inline, tooltipVisible, showOnFocus, position, html, ...attrs } = this.attrs;
+
+    if (inline) {
+      return <span {...attrs}>{children}</span>;
+    }
+
+    return <div {...attrs}>{children}</div>;
+  }
+
+  oncreate(vnode: Mithril.VnodeDOM<TooltipAttrs, this>) {
+    super.oncreate(vnode);
+
+    this.createTooltip();
+  }
+
+  onupdate(vnode: Mithril.VnodeDOM<TooltipAttrs, this>) {
+    this.createTooltip();
+  }
+
+  private createTooltip() {
     const {
       text,
       inline,
@@ -77,7 +98,7 @@ export default class Tooltip extends Component<TooltipAttrs> {
       ...attrs
     } = this.attrs;
 
-    attrs['aria-label'] = text;
+    this.attrs['aria-label'] = text;
 
     // https://getbootstrap.com/docs/3.3/javascript/#tooltips-options
     this.$.tooltip({
@@ -87,11 +108,5 @@ export default class Tooltip extends Component<TooltipAttrs> {
       // Fancy "hack" to assemble the trigger string
       trigger: classList('hover', [showOnFocus && 'focus']),
     });
-
-    if (inline) {
-      return <span {...attrs}>{children}</span>;
-    }
-
-    return <div {...attrs}>{children}</div>;
   }
 }

From a38c3f6bb1521311ba81ed823848c562fb863633 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sat, 8 May 2021 23:31:24 +0100
Subject: [PATCH 04/38] Fix import

---
 js/src/common/components/Badge.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/common/components/Badge.js b/js/src/common/components/Badge.js
index fbe05f7cd7..0b260850f3 100644
--- a/js/src/common/components/Badge.js
+++ b/js/src/common/components/Badge.js
@@ -1,5 +1,5 @@
+import Tooltip from './Tooltip';
 import Component from '../Component';
-import Tooltip from '../Tooltip';
 import icon from '../helpers/icon';
 
 /**

From 983577301f636ce5dec0e75d03e121d98a49a395 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sat, 8 May 2021 23:32:43 +0100
Subject: [PATCH 05/38] Add missing import

---
 js/src/common/components/Badge.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/src/common/components/Badge.js b/js/src/common/components/Badge.js
index 0b260850f3..8d077b3aca 100644
--- a/js/src/common/components/Badge.js
+++ b/js/src/common/components/Badge.js
@@ -1,6 +1,7 @@
 import Tooltip from './Tooltip';
 import Component from '../Component';
 import icon from '../helpers/icon';
+import classList from '../utils/classList';
 
 /**
  * The `Badge` component represents a user/discussion badge, indicating some

From 80fc860720ecd120d05f489072386c983698ac1e Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sat, 8 May 2021 23:54:13 +0100
Subject: [PATCH 06/38] Move Tooltip jQuery helper types to separate typing
 file

---
 js/@types/tooltips/index.d.ts | 68 +++++++++++++++++++++++++++++++++++
 js/shims.d.ts                 | 11 ++----
 2 files changed, 71 insertions(+), 8 deletions(-)
 create mode 100644 js/@types/tooltips/index.d.ts

diff --git a/js/@types/tooltips/index.d.ts b/js/@types/tooltips/index.d.ts
new file mode 100644
index 0000000000..35c38ac89f
--- /dev/null
+++ b/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 TooltipOptions {
+  /**
+   * 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?: TooltipOptions) => JQuery;
diff --git a/js/shims.d.ts b/js/shims.d.ts
index 94fcf2c5fd..153944961a 100644
--- a/js/shims.d.ts
+++ b/js/shims.d.ts
@@ -8,6 +8,8 @@ import * as _$ from 'jquery';
 // Globals from flarum/core
 import Application from './src/common/Application';
 
+import type { TooltipJQueryFunction } from './@types/tooltips/index';
+
 /**
  * flarum/core exposes several extensions globally:
  *
@@ -25,14 +27,7 @@ declare global {
 
   // Extend JQuery with our custom functions, defined with $.fn
   interface JQuery {
-    /**
-     * Creates a tooltip on a jQuery element reference.
-     *
-     * Optionally accepts placement and delay options.
-     *
-     * Returns the same reference to allow for method chaining.
-     */
-    tooltip: (tooltipOptions?: { placement?: 'top' | 'bottom' | 'left' | 'right'; delay?: number }) => JQuery;
+    tooltip: TooltipJQueryFunction;
   }
 }
 

From fdb40e5779c39633831989c813ec362ec69d973e Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sat, 8 May 2021 23:58:59 +0100
Subject: [PATCH 07/38] Add `delay` attr, update docblocks

---
 js/src/common/components/Tooltip.tsx | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index a5485062f7..47a7588687 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -1,6 +1,7 @@
 import Component, { ComponentAttrs } from '../Component';
 import type Mithril from 'mithril';
 import classList from '../utils/classList';
+import { TooltipOptions } from '../../../@types/tooltips';
 
 export interface TooltipAttrs extends ComponentAttrs {
   /**
@@ -39,6 +40,16 @@ export interface TooltipAttrs extends ComponentAttrs {
    * @deprecated
    */
   html?: boolean;
+  /**
+   * 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;
 }
 
 /**
@@ -50,15 +61,15 @@ export interface TooltipAttrs extends ComponentAttrs {
  * compatibility when we switch to pure CSS tooltips instead of Bootstrap
  * tooltips.
  *
- * @example <caption>Correct use of Tooltip component</caption>
+ * @example <caption>Basic usage</caption>
  *          <Tooltip text="You wish!">
  *            <Button>
  *              Click for free money!
  *            </Button>
  *          </Tooltip>
  *
- * @example <caption>Correct use of Tooltip component</caption>
- *          <Tooltip text="Replies from xxx, yyy, zzz and more.">
+ * @example <caption>Use of `position` and `showOnFocus` attrs</caption>
+ *          <Tooltip text="Woah! That's cool!" position="bottom" showOnFocus>
  *            <div>3 replies</div>
  *          </Tooltip>
  */
@@ -67,7 +78,7 @@ export default class Tooltip extends Component<TooltipAttrs> {
     const { children } = vnode;
 
     // We remove these to get the remaining attrs to pass to the DOM element
-    const { text, inline, tooltipVisible, showOnFocus, position, html, ...attrs } = this.attrs;
+    const { text, inline, tooltipVisible, showOnFocus, position, html, delay, ...attrs } = this.attrs;
 
     if (inline) {
       return <span {...attrs}>{children}</span>;
@@ -93,6 +104,7 @@ export default class Tooltip extends Component<TooltipAttrs> {
       tooltipVisible,
       showOnFocus = true,
       position = 'top',
+      delay,
       // This will have no effect when switching to CSS tooltips
       html = false,
       ...attrs
@@ -101,12 +113,13 @@ export default class Tooltip extends Component<TooltipAttrs> {
     this.attrs['aria-label'] = text;
 
     // https://getbootstrap.com/docs/3.3/javascript/#tooltips-options
-    this.$.tooltip({
+    this.$().tooltip({
       html,
+      delay,
       placement: position,
       title: text,
       // Fancy "hack" to assemble the trigger string
-      trigger: classList('hover', [showOnFocus && 'focus']),
+      trigger: classList('hover', [showOnFocus && 'focus']) as TooltipOptions['trigger'],
     });
   }
 }

From b475f5ccef259503f3e48f0d76f9408fd2937eca Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sat, 8 May 2021 23:28:58 +0000
Subject: [PATCH 08/38] Remove undeeded `index` on import

---
 js/shims.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/shims.d.ts b/js/shims.d.ts
index 153944961a..9a1d9dd822 100644
--- a/js/shims.d.ts
+++ b/js/shims.d.ts
@@ -8,7 +8,7 @@ import * as _$ from 'jquery';
 // Globals from flarum/core
 import Application from './src/common/Application';
 
-import type { TooltipJQueryFunction } from './@types/tooltips/index';
+import type { TooltipJQueryFunction } from './@types/tooltips';
 
 /**
  * flarum/core exposes several extensions globally:

From 6e13274bdae21d8ecd09d324c42a400c74b4115c Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sat, 8 May 2021 23:29:51 +0000
Subject: [PATCH 09/38] Add support for `destroy` option in tooltip function
 typings

---
 js/@types/tooltips/index.d.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/@types/tooltips/index.d.ts b/js/@types/tooltips/index.d.ts
index 35c38ac89f..e3d26bbe43 100644
--- a/js/@types/tooltips/index.d.ts
+++ b/js/@types/tooltips/index.d.ts
@@ -11,7 +11,7 @@
  *
  * @see https://getbootstrap.com/docs/3.3/javascript/#tooltips-options
  */
-export interface TooltipOptions {
+export interface TooltipCreationOptions {
   /**
    * Whether HTML content is allowed in the tooltip.
    *
@@ -65,4 +65,4 @@ export interface TooltipOptions {
  *
  * Returns the same jQuery reference to allow for method chaining.
  */
-export type TooltipJQueryFunction = (tooltipOptions?: TooltipOptions) => JQuery;
+export type TooltipJQueryFunction = (tooltipOptions?: TooltipCreationOptions | 'destroy') => JQuery;

From 21aa09282673c1b9f2b68c2301e6384cc4585d5d Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sat, 8 May 2021 23:34:07 +0000
Subject: [PATCH 10/38] Update type import

---
 js/src/common/components/Tooltip.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 47a7588687..eb7707058d 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -1,7 +1,7 @@
 import Component, { ComponentAttrs } from '../Component';
 import type Mithril from 'mithril';
 import classList from '../utils/classList';
-import { TooltipOptions } from '../../../@types/tooltips';
+import { TooltipCreationOptions } from '../../../@types/tooltips';
 
 export interface TooltipAttrs extends ComponentAttrs {
   /**
@@ -119,7 +119,7 @@ export default class Tooltip extends Component<TooltipAttrs> {
       placement: position,
       title: text,
       // Fancy "hack" to assemble the trigger string
-      trigger: classList('hover', [showOnFocus && 'focus']) as TooltipOptions['trigger'],
+      trigger: classList('hover', [showOnFocus && 'focus']) as TooltipCreationOptions['trigger'],
     });
   }
 }

From 4e4f8989ed55f9963d51591254026bf263dd7a38 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sat, 8 May 2021 23:35:27 +0000
Subject: [PATCH 11/38] Recreate tooltip inside `onupdate` if `text` attr has
 changed

---
 js/src/common/components/Tooltip.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index eb7707058d..006d860d9b 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -74,8 +74,16 @@ export interface TooltipAttrs extends ComponentAttrs {
  *          </Tooltip>
  */
 export default class Tooltip extends Component<TooltipAttrs> {
+  /**
+   * Contains the old tooltip text.
+   *
+   * Used to determine whether the tooltip should be recreated.
+   */
+  private oldText: string = '';
+
   view(vnode) {
     const { children } = vnode;
+    console.log(this.attrs);
 
     // We remove these to get the remaining attrs to pass to the DOM element
     const { text, inline, tooltipVisible, showOnFocus, position, html, delay, ...attrs } = this.attrs;
@@ -90,24 +98,29 @@ export default class Tooltip extends Component<TooltipAttrs> {
   oncreate(vnode: Mithril.VnodeDOM<TooltipAttrs, this>) {
     super.oncreate(vnode);
 
+    this.oldText = this.attrs.text;
+
     this.createTooltip();
   }
 
   onupdate(vnode: Mithril.VnodeDOM<TooltipAttrs, this>) {
-    this.createTooltip();
+    // In case the `text` attr was updated, we need to recreate the tooltip
+    if (this.attrs.text !== this.oldText) {
+      this.oldText = this.attrs.text;
+
+      this.$().tooltip('destroy');
+      this.createTooltip();
+    }
   }
 
   private createTooltip() {
     const {
       text,
-      inline,
-      tooltipVisible,
       showOnFocus = true,
       position = 'top',
       delay,
       // This will have no effect when switching to CSS tooltips
       html = false,
-      ...attrs
     } = this.attrs;
 
     this.attrs['aria-label'] = text;

From ba0b52893d7a1baa2d197467cc7538928f002ddc Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sat, 8 May 2021 23:52:18 +0000
Subject: [PATCH 12/38] Rewrite Badge to use Tooltip component; remove
 console.logs

---
 js/src/common/components/Badge.js    | 28 +++++++++++++++++-----------
 js/src/common/components/Tooltip.tsx |  1 -
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/js/src/common/components/Badge.js b/js/src/common/components/Badge.js
index 8d077b3aca..2771149250 100644
--- a/js/src/common/components/Badge.js
+++ b/js/src/common/components/Badge.js
@@ -2,6 +2,7 @@ import Tooltip from './Tooltip';
 import Component from '../Component';
 import icon from '../helpers/icon';
 import classList from '../utils/classList';
+import extractText from '../utils/extractText';
 
 /**
  * The `Badge` component represents a user/discussion badge, indicating some
@@ -18,22 +19,27 @@ import classList from '../utils/classList';
  */
 export default class Badge extends Component {
   view() {
-    const attrs = Object.assign({}, this.attrs);
-
-    const { type, icon: iconName, title = '' } = attrs;
+    const { type, icon: iconName, label, ...attrs } = this.attrs;
 
     const className = classList('Badge', [type && `Badge--${type}`], attrs.className);
+    const tooltipText = extractText(label);
+
+    const iconChild = iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;');
+
+    const badgeAttrs = {
+      className,
+      ...attrs,
+    };
+
+    // If we don't have a tooltip label, don't render the tooltip component.
+    if (typeof tooltipText !== 'string') {
+      return <div {...badgeAttrs}>{iconChild}</div>;
+    }
 
     return (
-      <Tooltip text={title} {...attrs} className={className}>
-        {iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;')}
+      <Tooltip text={tooltipText} {...badgeAttrs}>
+        {iconChild}
       </Tooltip>
     );
   }
-
-  oncreate(vnode) {
-    super.oncreate(vnode);
-
-    if (this.attrs.label) this.$().tooltip();
-  }
 }
diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 006d860d9b..6061a35e33 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -83,7 +83,6 @@ export default class Tooltip extends Component<TooltipAttrs> {
 
   view(vnode) {
     const { children } = vnode;
-    console.log(this.attrs);
 
     // We remove these to get the remaining attrs to pass to the DOM element
     const { text, inline, tooltipVisible, showOnFocus, position, html, delay, ...attrs } = this.attrs;

From ff17c09e469a613cef593bc4a0fc463b858b361e Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sat, 8 May 2021 23:53:14 +0000
Subject: [PATCH 13/38] Simplify Tooltip component to use `title` attr

---
 js/src/common/components/Tooltip.tsx | 35 ++++++++--------------------
 1 file changed, 10 insertions(+), 25 deletions(-)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 6061a35e33..90de7f5a20 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -74,13 +74,6 @@ export interface TooltipAttrs extends ComponentAttrs {
  *          </Tooltip>
  */
 export default class Tooltip extends Component<TooltipAttrs> {
-  /**
-   * Contains the old tooltip text.
-   *
-   * Used to determine whether the tooltip should be recreated.
-   */
-  private oldText: string = '';
-
   view(vnode) {
     const { children } = vnode;
 
@@ -88,33 +81,28 @@ export default class Tooltip extends Component<TooltipAttrs> {
     const { text, inline, tooltipVisible, showOnFocus, position, html, delay, ...attrs } = this.attrs;
 
     if (inline) {
-      return <span {...attrs}>{children}</span>;
+      return (
+        <span title={text} {...attrs}>
+          {children}
+        </span>
+      );
     }
 
-    return <div {...attrs}>{children}</div>;
+    return (
+      <div title={text} {...attrs}>
+        {children}
+      </div>
+    );
   }
 
   oncreate(vnode: Mithril.VnodeDOM<TooltipAttrs, this>) {
     super.oncreate(vnode);
 
-    this.oldText = this.attrs.text;
-
     this.createTooltip();
   }
 
-  onupdate(vnode: Mithril.VnodeDOM<TooltipAttrs, this>) {
-    // In case the `text` attr was updated, we need to recreate the tooltip
-    if (this.attrs.text !== this.oldText) {
-      this.oldText = this.attrs.text;
-
-      this.$().tooltip('destroy');
-      this.createTooltip();
-    }
-  }
-
   private createTooltip() {
     const {
-      text,
       showOnFocus = true,
       position = 'top',
       delay,
@@ -122,14 +110,11 @@ export default class Tooltip extends Component<TooltipAttrs> {
       html = false,
     } = this.attrs;
 
-    this.attrs['aria-label'] = text;
-
     // https://getbootstrap.com/docs/3.3/javascript/#tooltips-options
     this.$().tooltip({
       html,
       delay,
       placement: position,
-      title: text,
       // Fancy "hack" to assemble the trigger string
       trigger: classList('hover', [showOnFocus && 'focus']) as TooltipCreationOptions['trigger'],
     });

From 66393ec99ee3dea6760f233ab9b9029f964aae02 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 00:25:41 +0000
Subject: [PATCH 14/38] Run `extractText` inside Tooltip component

---
 js/src/common/components/Badge.js    |  4 +---
 js/src/common/components/Tooltip.tsx | 12 +++++++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/js/src/common/components/Badge.js b/js/src/common/components/Badge.js
index 2771149250..74759aa27e 100644
--- a/js/src/common/components/Badge.js
+++ b/js/src/common/components/Badge.js
@@ -2,7 +2,6 @@ import Tooltip from './Tooltip';
 import Component from '../Component';
 import icon from '../helpers/icon';
 import classList from '../utils/classList';
-import extractText from '../utils/extractText';
 
 /**
  * The `Badge` component represents a user/discussion badge, indicating some
@@ -22,7 +21,6 @@ export default class Badge extends Component {
     const { type, icon: iconName, label, ...attrs } = this.attrs;
 
     const className = classList('Badge', [type && `Badge--${type}`], attrs.className);
-    const tooltipText = extractText(label);
 
     const iconChild = iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;');
 
@@ -37,7 +35,7 @@ export default class Badge extends Component {
     }
 
     return (
-      <Tooltip text={tooltipText} {...badgeAttrs}>
+      <Tooltip text={label} {...badgeAttrs}>
         {iconChild}
       </Tooltip>
     );
diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 90de7f5a20..ae002f179a 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -2,12 +2,16 @@ import Component, { ComponentAttrs } from '../Component';
 import type Mithril from 'mithril';
 import classList from '../utils/classList';
 import { TooltipCreationOptions } from '../../../@types/tooltips';
+import extractText from '../utils/extractText';
 
 export interface TooltipAttrs extends ComponentAttrs {
   /**
    * Tooltip textual content.
+   *
+   * String arrays, like those provided by the translator, will be flattened
+   * into strings.
    */
-  text: string;
+  text: string | string[];
   /**
    * If inline, uses a `<span>` container, else uses a `<div>`.
    *
@@ -80,16 +84,18 @@ export default class Tooltip extends Component<TooltipAttrs> {
     // We remove these to get the remaining attrs to pass to the DOM element
     const { text, inline, tooltipVisible, showOnFocus, position, html, delay, ...attrs } = this.attrs;
 
+    const realText = Array.isArray(text) ? extractText(text) : text;
+
     if (inline) {
       return (
-        <span title={text} {...attrs}>
+        <span title={realText} {...attrs}>
           {children}
         </span>
       );
     }
 
     return (
-      <div title={text} {...attrs}>
+      <div title={realText} {...attrs}>
         {children}
       </div>
     );

From c05badcca232df8c1d56ace6ea69b0ae7d5c5892 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 00:44:01 +0000
Subject: [PATCH 15/38] Use `inline-block` instead of `<span>` for inline
 Tooltip component

---
 js/src/common/components/Tooltip.tsx | 12 ++----------
 less/common/Tooltip.less             |  4 ++++
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index ae002f179a..906ce124da 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -82,20 +82,12 @@ export default class Tooltip extends Component<TooltipAttrs> {
     const { children } = vnode;
 
     // We remove these to get the remaining attrs to pass to the DOM element
-    const { text, inline, tooltipVisible, showOnFocus, position, html, delay, ...attrs } = this.attrs;
+    const { text, inline, tooltipVisible, showOnFocus, position, html, delay, className, class: classes, ...attrs } = this.attrs;
 
     const realText = Array.isArray(text) ? extractText(text) : text;
 
-    if (inline) {
-      return (
-        <span title={realText} {...attrs}>
-          {children}
-        </span>
-      );
-    }
-
     return (
-      <div title={realText} {...attrs}>
+      <div title={realText} className={classList('tooltip-container', [inline && 'tooltip-container--inline'], className, classes)} {...attrs}>
         {children}
       </div>
     );
diff --git a/less/common/Tooltip.less b/less/common/Tooltip.less
index 282c357363..7e7d014aa0 100644
--- a/less/common/Tooltip.less
+++ b/less/common/Tooltip.less
@@ -1,6 +1,10 @@
 // ------------------------------------
 // Tooltips
 
+.tooltip-container--inline {
+  display: inline-block;
+}
+
 // Base class
 .tooltip {
   position: absolute;

From 2203f9bc51d6cc931cf49c7ebd85060855f9177f Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 00:47:12 +0000
Subject: [PATCH 16/38] Use new Tooltip component for Preview post button

---
 js/src/common/components/TextEditor.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/js/src/common/components/TextEditor.js b/js/src/common/components/TextEditor.js
index 105441ce2d..2b457725e8 100644
--- a/js/src/common/components/TextEditor.js
+++ b/js/src/common/components/TextEditor.js
@@ -4,6 +4,7 @@ import listItems from '../helpers/listItems';
 import Button from './Button';
 
 import BasicEditorDriver from '../utils/BasicEditorDriver';
+import Tooltip from './Tooltip';
 
 /**
  * The `TextEditor` component displays a textarea with controls, including a
@@ -108,13 +109,9 @@ export default class TextEditor extends Component {
     if (this.attrs.preview) {
       items.add(
         'preview',
-        Button.component({
-          icon: 'far fa-eye',
-          className: 'Button Button--icon',
-          onclick: this.attrs.preview,
-          title: app.translator.trans('core.forum.composer.preview_tooltip'),
-          oncreate: (vnode) => $(vnode.dom).tooltip(),
-        })
+        <Tooltip text={app.translator.trans('core.forum.composer.preview_tooltip')}>
+          <Button icon="far fa-eye" className="Button Button--icon" onclick={this.attrs.preview} />
+        </Tooltip>
       );
     }
 

From 14ee976ac94d1aae12d51d694882fd50cc6cca86 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 00:48:39 +0000
Subject: [PATCH 17/38] Use new Tooltip component in TextEditorButton

---
 js/src/common/components/TextEditorButton.js | 23 +++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/js/src/common/components/TextEditorButton.js b/js/src/common/components/TextEditorButton.js
index 8e54feafb7..42cdd361e7 100644
--- a/js/src/common/components/TextEditorButton.js
+++ b/js/src/common/components/TextEditorButton.js
@@ -1,19 +1,30 @@
 import Button from './Button';
+import Tooltip from './Tooltip';
 
 /**
  * The `TextEditorButton` component displays a button suitable for the text
  * editor toolbar.
  */
 export default class TextEditorButton extends Button {
-  static initAttrs(attrs) {
-    super.initAttrs(attrs);
+  view(vnode) {
+    const originalView = super.view(vnode);
 
-    attrs.className = attrs.className || 'Button Button--icon Button--link';
+    console.log(originalView);
+
+    // Steal tooltip label from the Button superclass
+    const tooltipText = originalView.attrs.title;
+    delete originalView.attrs.title;
+
+    return (
+      <Tooltip inline text={tooltipText}>
+        {originalView}
+      </Tooltip>
+    );
   }
 
-  oncreate(vnode) {
-    super.oncreate(vnode);
+  static initAttrs(attrs) {
+    super.initAttrs(attrs);
 
-    this.$().tooltip();
+    attrs.className = attrs.className || 'Button Button--icon Button--link';
   }
 }

From abd0b569f4a9a5fa0308944bd6b3f8e03fb2fa21 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 00:51:46 +0000
Subject: [PATCH 18/38] Use new Tooltip component for DiscussionListItem-author

---
 js/src/forum/components/DiscussionListItem.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/js/src/forum/components/DiscussionListItem.js b/js/src/forum/components/DiscussionListItem.js
index ed1fa3d5c0..5ead9fdeec 100644
--- a/js/src/forum/components/DiscussionListItem.js
+++ b/js/src/forum/components/DiscussionListItem.js
@@ -16,6 +16,7 @@ import extractText from '../../common/utils/extractText';
 import classList from '../../common/utils/classList';
 import DiscussionPage from './DiscussionPage';
 import escapeRegExp from '../../common/utils/escapeRegExp';
+import Tooltip from '../../common/components/Tooltip';
 
 /**
  * The `DiscussionListItem` component shows a single discussion in the
@@ -101,18 +102,13 @@ export default class DiscussionListItem extends Component {
         </span>
 
         <div className={'DiscussionListItem-content Slidable-content' + (isUnread ? ' unread' : '') + (isRead ? ' read' : '')}>
-          <Link
-            href={user ? app.route.user(user) : '#'}
+          <Tooltip
             className="DiscussionListItem-author"
-            title={extractText(
-              app.translator.trans('core.forum.discussion_list.started_text', { user: user, ago: humanTime(discussion.createdAt()) })
-            )}
-            oncreate={function (vnode) {
-              $(vnode.dom).tooltip({ placement: 'right' });
-            }}
+            text={app.translator.trans('core.forum.discussion_list.started_text', { user, ago: humanTime(discussion.createdAt()) })}
+            position="right"
           >
-            {avatar(user, { title: '' })}
-          </Link>
+            <Link href={user ? app.route.user(user) : '#'}>{avatar(user, { title: '' })}</Link>
+          </Tooltip>
 
           <ul className="DiscussionListItem-badges badges">{listItems(discussion.badges().toArray())}</ul>
 

From 6f6c18553bedc3c84cc832fc39eacc1a3e1a90a7 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 01:21:57 +0000
Subject: [PATCH 19/38] Allow block, inline-block, and inline container options

---
 js/src/common/components/Tooltip.tsx | 11 ++++++-----
 less/common/Tooltip.less             |  9 +++++++--
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 906ce124da..42eff45240 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -13,11 +13,12 @@ export interface TooltipAttrs extends ComponentAttrs {
    */
   text: string | string[];
   /**
-   * If inline, uses a `<span>` container, else uses a `<div>`.
+   * Defines the type of container to use. Chosen option defines the `display`
+   * property of the container element in CSS.
    *
-   * Default: `false`.
+   * Default: `'block'`.
    */
-  inline?: boolean;
+  containerType?: 'block' | 'inline' | 'inline-block';
   /**
    * Manually show tooltip. `false` will show based on cursor events.
    *
@@ -82,12 +83,12 @@ export default class Tooltip extends Component<TooltipAttrs> {
     const { children } = vnode;
 
     // We remove these to get the remaining attrs to pass to the DOM element
-    const { text, inline, tooltipVisible, showOnFocus, position, html, delay, className, class: classes, ...attrs } = this.attrs;
+    const { text, containerType = 'block', tooltipVisible, showOnFocus, position, html, delay, className, class: classes, ...attrs } = this.attrs;
 
     const realText = Array.isArray(text) ? extractText(text) : text;
 
     return (
-      <div title={realText} className={classList('tooltip-container', [inline && 'tooltip-container--inline'], className, classes)} {...attrs}>
+      <div title={realText} className={classList('tooltip-container', `tooltip-container--${containerType}`, className, classes)} {...attrs}>
         {children}
       </div>
     );
diff --git a/less/common/Tooltip.less b/less/common/Tooltip.less
index 7e7d014aa0..319f768a2c 100644
--- a/less/common/Tooltip.less
+++ b/less/common/Tooltip.less
@@ -1,8 +1,13 @@
 // ------------------------------------
 // Tooltips
 
-.tooltip-container--inline {
-  display: inline-block;
+.tooltip-container {
+  &--inline {
+    display: inline;
+  }
+  &--inline-block {
+    display: inline-block;
+  }
 }
 
 // Base class

From db6fc6db6c058b99dbe052b8e948422135437ae0 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 01:26:09 +0000
Subject: [PATCH 20/38] Use `inline-block` for TextEditorButton

---
 js/src/common/components/TextEditorButton.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/common/components/TextEditorButton.js b/js/src/common/components/TextEditorButton.js
index 42cdd361e7..f92fd772d3 100644
--- a/js/src/common/components/TextEditorButton.js
+++ b/js/src/common/components/TextEditorButton.js
@@ -16,7 +16,7 @@ export default class TextEditorButton extends Button {
     delete originalView.attrs.title;
 
     return (
-      <Tooltip inline text={tooltipText}>
+      <Tooltip containerType="inline-block" text={tooltipText}>
         {originalView}
       </Tooltip>
     );

From 84c129b941c04dbca0ace2aed0c07222a6b7d296 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 01:26:37 +0000
Subject: [PATCH 21/38] Add warning when supplying `title` attr to Tooltip
 component

---
 js/src/common/components/Tooltip.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 42eff45240..34823c26ee 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -82,6 +82,12 @@ export default class Tooltip extends Component<TooltipAttrs> {
   view(vnode) {
     const { children } = vnode;
 
+    if (this.attrs.title) {
+      console.warn(
+        '`title` attribute was passed to Tooltip component. Was this intentional? Tooltip content should be passed to the `text` attr instead.'
+      );
+    }
+
     // We remove these to get the remaining attrs to pass to the DOM element
     const { text, containerType = 'block', tooltipVisible, showOnFocus, position, html, delay, className, class: classes, ...attrs } = this.attrs;
 

From e3b1864bb7b00df8e8b522391ef2253823d6ed95 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 01:27:29 +0000
Subject: [PATCH 22/38] Abstract away tooltip text auto-updating logic into
 Tooltip component

---
 js/src/common/components/Tooltip.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 34823c26ee..953ca7c4a4 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -79,6 +79,9 @@ export interface TooltipAttrs extends ComponentAttrs {
  *          </Tooltip>
  */
 export default class Tooltip extends Component<TooltipAttrs> {
+  private oldText: string = '';
+  private shouldRecreateTooltip: boolean = false;
+
   view(vnode) {
     const { children } = vnode;
 
@@ -93,6 +96,12 @@ export default class Tooltip extends Component<TooltipAttrs> {
 
     const realText = Array.isArray(text) ? extractText(text) : text;
 
+    // We need to recreate the tooltip if the text has changed
+    if (realText !== this.oldText) {
+      this.oldText = realText;
+      this.shouldRecreateTooltip = true;
+    }
+
     return (
       <div title={realText} className={classList('tooltip-container', `tooltip-container--${containerType}`, className, classes)} {...attrs}>
         {children}
@@ -103,7 +112,18 @@ export default class Tooltip extends Component<TooltipAttrs> {
   oncreate(vnode: Mithril.VnodeDOM<TooltipAttrs, this>) {
     super.oncreate(vnode);
 
-    this.createTooltip();
+    this.recreateTooltip();
+  }
+
+  onupdate(vnode: Mithril.VnodeDOM<TooltipAttrs, this>) {
+    this.recreateTooltip();
+  }
+
+  private recreateTooltip() {
+    if (this.shouldRecreateTooltip) {
+      this.$().tooltip('destroy');
+      this.createTooltip();
+    }
   }
 
   private createTooltip() {

From a0abbf902315e0d5873a217778be9610197261cb Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 01:28:02 +0000
Subject: [PATCH 23/38] Use new Tooltip component in PostEdited component

---
 js/src/forum/components/PostEdited.js | 30 ++++-----------------------
 1 file changed, 4 insertions(+), 26 deletions(-)

diff --git a/js/src/forum/components/PostEdited.js b/js/src/forum/components/PostEdited.js
index ec00430a32..871a977274 100644
--- a/js/src/forum/components/PostEdited.js
+++ b/js/src/forum/components/PostEdited.js
@@ -1,6 +1,6 @@
 import Component from '../../common/Component';
 import humanTime from '../../common/utils/humanTime';
-import extractText from '../../common/utils/extractText';
+import Tooltip from '../../common/components/Tooltip';
 
 /**
  * The `PostEdited` component displays information about when and by whom a post
@@ -13,43 +13,21 @@ import extractText from '../../common/utils/extractText';
 export default class PostEdited extends Component {
   oninit(vnode) {
     super.oninit(vnode);
-
-    this.shouldUpdateTooltip = false;
-    this.oldEditedInfo = null;
   }
 
   view() {
     const post = this.attrs.post;
     const editedUser = post.editedUser();
-    const editedInfo = extractText(app.translator.trans('core.forum.post.edited_tooltip', { user: editedUser, ago: humanTime(post.editedAt()) }));
-    if (editedInfo !== this.oldEditedInfo) {
-      this.shouldUpdateTooltip = true;
-      this.oldEditedInfo = editedInfo;
-    }
+    const editedInfo = app.translator.trans('core.forum.post.edited_tooltip', { user: editedUser, ago: humanTime(post.editedAt()) });
 
     return (
-      <span className="PostEdited" title={editedInfo}>
+      <Tooltip containerType="inline" className="PostEdited" text={editedInfo}>
         {app.translator.trans('core.forum.post.edited_text')}
-      </span>
+      </Tooltip>
     );
   }
 
   oncreate(vnode) {
     super.oncreate(vnode);
-
-    this.rebuildTooltip();
-  }
-
-  onupdate(vnode) {
-    super.onupdate(vnode);
-
-    this.rebuildTooltip();
-  }
-
-  rebuildTooltip() {
-    if (this.shouldUpdateTooltip) {
-      this.$().tooltip('destroy').tooltip();
-      this.shouldUpdateTooltip = false;
-    }
   }
 }

From 23b3830bd3aa50bbc52641f514cee91913e8efbf Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 01:56:34 +0000
Subject: [PATCH 24/38] Add deprecation warning when `$.tooltip` is used
 outside of the Tooltip component

---
 js/src/common/components/Tooltip.tsx | 18 +++++++++++-------
 js/src/common/index.js               | 15 +++++++++++++++
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 953ca7c4a4..10468fcee9 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -136,12 +136,16 @@ export default class Tooltip extends Component<TooltipAttrs> {
     } = this.attrs;
 
     // https://getbootstrap.com/docs/3.3/javascript/#tooltips-options
-    this.$().tooltip({
-      html,
-      delay,
-      placement: position,
-      // Fancy "hack" to assemble the trigger string
-      trigger: classList('hover', [showOnFocus && 'focus']) as TooltipCreationOptions['trigger'],
-    });
+    this.$().tooltip(
+      {
+        html,
+        delay,
+        placement: position,
+        // Fancy "hack" to assemble the trigger string
+        trigger: classList('hover', [showOnFocus && 'focus']) as TooltipCreationOptions['trigger'],
+      },
+      // @ts-expect-error We don't want this arg to be part of the public API. It only exists to prevent deprecation warnings when using `$.tooltip` in this component.
+      'DANGEROUS_tooltip_jquery_fn_deprecation_exempt'
+    );
   }
 }
diff --git a/js/src/common/index.js b/js/src/common/index.js
index c2d576780e..b26d8d6c85 100644
--- a/js/src/common/index.js
+++ b/js/src/common/index.js
@@ -25,3 +25,18 @@ import * as Extend from './extend/index';
 export { Extend };
 
 import './utils/arrayFlatPolyfill';
+
+const tooltipGen = $.fn.tooltip;
+
+// Remove in a future version of Flarum.
+$.fn.tooltip = function (options, caller) {
+  // Show a warning when `$.tooltip` is used outside of the Tooltip component.
+  // This functionality is deprecated and should not be used.
+  if (['DANGEROUS_tooltip_jquery_fn_deprecation_exempt'].includes(caller)) {
+    console.warn(
+      "Calling `$.tooltip` is now deprecated. Please use the `<Tooltip>` component exposed by flarum/core instead. `$.tooltip` may be removed in a future version of Flarum.\n\nIf this component doesn't meet your requirements, please open an issue: https://github.com/flarum/core/issues/new?assignees=davwheat&labels=type/bug,needs-verification&template=bug-report.md&title=Tooltip%20component%20unsuitable%20for%20use%20case"
+    );
+  }
+
+  tooltipGen.bind(this)(options);
+};

From 270709fa22ff5697d3f99b6b8c3ec889a816d7bf Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 02:08:51 +0000
Subject: [PATCH 25/38] Fix broken tooltip on Badges

---
 js/src/common/components/Badge.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/common/components/Badge.js b/js/src/common/components/Badge.js
index 74759aa27e..d88319ecfd 100644
--- a/js/src/common/components/Badge.js
+++ b/js/src/common/components/Badge.js
@@ -30,7 +30,7 @@ export default class Badge extends Component {
     };
 
     // If we don't have a tooltip label, don't render the tooltip component.
-    if (typeof tooltipText !== 'string') {
+    if (typeof label !== 'string' && !Array.isArray(label)) {
       return <div {...badgeAttrs}>{iconChild}</div>;
     }
 

From e4ad3d08d33e9d18cb0b88d4f61db155936f8086 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 02:11:13 +0000
Subject: [PATCH 26/38] Explicitly state default tooltip options

---
 js/src/common/components/Tooltip.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 10468fcee9..587f4365bd 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -33,6 +33,8 @@ export interface TooltipAttrs extends ComponentAttrs {
   showOnFocus?: boolean;
   /**
    * Tooltip position around element.
+   *
+   * Default: `'top'`.
    */
   position?: 'top' | 'bottom' | 'left' | 'right';
   /**
@@ -42,6 +44,8 @@ export interface TooltipAttrs extends ComponentAttrs {
    * be used wherever possible, and will not work when we migrate to CSS-only
    * tooltips.
    *
+   * Default: `false`.
+   *
    * @deprecated
    */
   html?: boolean;
@@ -52,6 +56,8 @@ export interface TooltipAttrs extends ComponentAttrs {
    * **Warning:** this option will be removed when we switch to CSS-only
    * tooltips.
    *
+   * Default: `0`.
+   *
    * @deprecated
    */
   delay?: number;
@@ -92,7 +98,18 @@ export default class Tooltip extends Component<TooltipAttrs> {
     }
 
     // We remove these to get the remaining attrs to pass to the DOM element
-    const { text, containerType = 'block', tooltipVisible, showOnFocus, position, html, delay, className, class: classes, ...attrs } = this.attrs;
+    const {
+      text,
+      containerType = 'block',
+      tooltipVisible,
+      showOnFocus = true,
+      position = 'top',
+      html = false,
+      delay = 0,
+      className,
+      class: classes,
+      ...attrs
+    } = this.attrs;
 
     const realText = Array.isArray(text) ? extractText(text) : text;
 

From 4d13d021d481982cc13aaf99337e32b238976421 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 13:27:15 +0100
Subject: [PATCH 27/38] WIP manual show tooltip attr

---
 js/@types/tooltips/index.d.ts        |  2 +-
 js/src/common/components/Tooltip.tsx | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/js/@types/tooltips/index.d.ts b/js/@types/tooltips/index.d.ts
index e3d26bbe43..bc96a5aefe 100644
--- a/js/@types/tooltips/index.d.ts
+++ b/js/@types/tooltips/index.d.ts
@@ -65,4 +65,4 @@ export interface TooltipCreationOptions {
  *
  * Returns the same jQuery reference to allow for method chaining.
  */
-export type TooltipJQueryFunction = (tooltipOptions?: TooltipCreationOptions | 'destroy') => JQuery;
+export type TooltipJQueryFunction = (tooltipOptions?: TooltipCreationOptions | 'destroy' | 'show' | 'hide') => JQuery;
diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 587f4365bd..77bf5f195a 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -141,6 +141,12 @@ export default class Tooltip extends Component<TooltipAttrs> {
       this.$().tooltip('destroy');
       this.createTooltip();
     }
+
+    if (this.attrs.tooltipVisible === true) {
+      this.$().tooltip('show');
+    } else if (this.attrs.tooltipVisible === false) {
+      this.$().tooltip('hide');
+    }
   }
 
   private createTooltip() {
@@ -150,8 +156,13 @@ export default class Tooltip extends Component<TooltipAttrs> {
       delay,
       // This will have no effect when switching to CSS tooltips
       html = false,
+      tooltipVisible,
     } = this.attrs;
 
+    const trigger = (typeof tooltipVisible === 'boolean'
+      ? 'manual'
+      : classList('hover', [showOnFocus && 'focus'])) as TooltipCreationOptions['trigger'];
+
     // https://getbootstrap.com/docs/3.3/javascript/#tooltips-options
     this.$().tooltip(
       {
@@ -159,7 +170,7 @@ export default class Tooltip extends Component<TooltipAttrs> {
         delay,
         placement: position,
         // Fancy "hack" to assemble the trigger string
-        trigger: classList('hover', [showOnFocus && 'focus']) as TooltipCreationOptions['trigger'],
+        trigger,
       },
       // @ts-expect-error We don't want this arg to be part of the public API. It only exists to prevent deprecation warnings when using `$.tooltip` in this component.
       'DANGEROUS_tooltip_jquery_fn_deprecation_exempt'

From 3c40bd2c07190983ebad160179b519425fc038f5 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 14:24:09 +0000
Subject: [PATCH 28/38] Fix deprecation warning

---
 js/src/common/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/common/index.js b/js/src/common/index.js
index b26d8d6c85..8d3f554a76 100644
--- a/js/src/common/index.js
+++ b/js/src/common/index.js
@@ -32,7 +32,7 @@ const tooltipGen = $.fn.tooltip;
 $.fn.tooltip = function (options, caller) {
   // Show a warning when `$.tooltip` is used outside of the Tooltip component.
   // This functionality is deprecated and should not be used.
-  if (['DANGEROUS_tooltip_jquery_fn_deprecation_exempt'].includes(caller)) {
+  if (!['DANGEROUS_tooltip_jquery_fn_deprecation_exempt'].includes(caller)) {
     console.warn(
       "Calling `$.tooltip` is now deprecated. Please use the `<Tooltip>` component exposed by flarum/core instead. `$.tooltip` may be removed in a future version of Flarum.\n\nIf this component doesn't meet your requirements, please open an issue: https://github.com/flarum/core/issues/new?assignees=davwheat&labels=type/bug,needs-verification&template=bug-report.md&title=Tooltip%20component%20unsuitable%20for%20use%20case"
     );

From 422c08df0122ae0f5981bb8324a85b7285a3cdca Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 15:42:28 +0000
Subject: [PATCH 29/38] Add support for tooltip visibility attr

---
 js/src/common/components/Tooltip.tsx | 35 +++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 77bf5f195a..94219d725b 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -86,7 +86,10 @@ export interface TooltipAttrs extends ComponentAttrs {
  */
 export default class Tooltip extends Component<TooltipAttrs> {
   private oldText: string = '';
+  private oldVisibility: boolean | undefined;
+
   private shouldRecreateTooltip: boolean = false;
+  private shouldChangeTooltipVisibility: boolean = false;
 
   view(vnode) {
     const { children } = vnode;
@@ -119,6 +122,11 @@ export default class Tooltip extends Component<TooltipAttrs> {
       this.shouldRecreateTooltip = true;
     }
 
+    if (tooltipVisible !== this.oldVisibility) {
+      this.oldVisibility = this.attrs.tooltipVisible;
+      this.shouldChangeTooltipVisibility = true;
+    }
+
     return (
       <div title={realText} className={classList('tooltip-container', `tooltip-container--${containerType}`, className, classes)} {...attrs}>
         {children}
@@ -138,14 +146,35 @@ export default class Tooltip extends Component<TooltipAttrs> {
 
   private recreateTooltip() {
     if (this.shouldRecreateTooltip) {
-      this.$().tooltip('destroy');
+      this.$().tooltip(
+        'destroy',
+        // @ts-expect-error We don't want this arg to be part of the public API. It only exists to prevent deprecation warnings when using `$.tooltip` in this component.
+        'DANGEROUS_tooltip_jquery_fn_deprecation_exempt'
+      );
       this.createTooltip();
+      this.shouldRecreateTooltip = false;
+    }
+
+    if (this.shouldChangeTooltipVisibility) {
+      this.shouldChangeTooltipVisibility = false;
+      this.updateVisibility();
+
     }
+  }
 
+  private updateVisibility() {
     if (this.attrs.tooltipVisible === true) {
-      this.$().tooltip('show');
+      this.$().tooltip(
+        'show',
+        // @ts-expect-error We don't want this arg to be part of the public API. It only exists to prevent deprecation warnings when using `$.tooltip` in this component.
+        'DANGEROUS_tooltip_jquery_fn_deprecation_exempt'
+      );
     } else if (this.attrs.tooltipVisible === false) {
-      this.$().tooltip('hide');
+      this.$().tooltip(
+        'hide',
+        // @ts-expect-error We don't want this arg to be part of the public API. It only exists to prevent deprecation warnings when using `$.tooltip` in this component.
+        'DANGEROUS_tooltip_jquery_fn_deprecation_exempt'
+      );
     }
   }
 

From 677968bac8b8dd49dd80a714bd6abe7a2b32e37f Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 9 May 2021 18:49:34 +0000
Subject: [PATCH 30/38] Fix prettier

---
 js/src/common/components/Tooltip.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 94219d725b..4ed3ec3e78 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -158,7 +158,6 @@ export default class Tooltip extends Component<TooltipAttrs> {
     if (this.shouldChangeTooltipVisibility) {
       this.shouldChangeTooltipVisibility = false;
       this.updateVisibility();
-
     }
   }
 

From 2e5b40d9355d735cc3c3da041b94663e901cce5d Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 10 May 2021 00:23:29 +0100
Subject: [PATCH 31/38] Call `super.onupdate`

---
 js/src/common/components/Tooltip.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 4ed3ec3e78..f22519c6c6 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -141,6 +141,8 @@ export default class Tooltip extends Component<TooltipAttrs> {
   }
 
   onupdate(vnode: Mithril.VnodeDOM<TooltipAttrs, this>) {
+    super.onupdate(vnode);
+
     this.recreateTooltip();
   }
 

From 3fe600314b240603135b3ae08adca56bf545ce42 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 10 May 2021 00:24:35 +0100
Subject: [PATCH 32/38] Add attr to disable `title` attr warning

---
 js/src/common/components/Tooltip.tsx | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index f22519c6c6..a03b191213 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -61,6 +61,12 @@ export interface TooltipAttrs extends ComponentAttrs {
    * @deprecated
    */
   delay?: number;
+  /**
+   * Used to disable the warning for passing text to the `title` attribute.
+   *
+   * Tooltip text should be passed to the `text` attribute.
+   */
+  ignoreTitleWarning?: boolean;
 }
 
 /**
@@ -94,26 +100,15 @@ export default class Tooltip extends Component<TooltipAttrs> {
   view(vnode) {
     const { children } = vnode;
 
-    if (this.attrs.title) {
+    // We remove these to get the remaining attrs to pass to the DOM element
+    const { text, tooltipVisible, showOnFocus = true, position = 'top', ignoreTitleWarning = false, html = false, delay = 0, ...attrs } = this.attrs;
+
+    if (this.attrs.title && !ignoreTitleWarning) {
       console.warn(
         '`title` attribute was passed to Tooltip component. Was this intentional? Tooltip content should be passed to the `text` attr instead.'
       );
     }
 
-    // We remove these to get the remaining attrs to pass to the DOM element
-    const {
-      text,
-      containerType = 'block',
-      tooltipVisible,
-      showOnFocus = true,
-      position = 'top',
-      html = false,
-      delay = 0,
-      className,
-      class: classes,
-      ...attrs
-    } = this.attrs;
-
     const realText = Array.isArray(text) ? extractText(text) : text;
 
     // We need to recreate the tooltip if the text has changed

From 22ebd0b017018cff91b24c82c379c3fcdce34202 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 10 May 2021 00:30:50 +0000
Subject: [PATCH 33/38] 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.
---
 js/src/common/components/Tooltip.tsx | 137 ++++++++++++++++++++-------
 1 file changed, 102 insertions(+), 35 deletions(-)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index a03b191213..8a2b3fc55d 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -1,10 +1,10 @@
-import Component, { ComponentAttrs } from '../Component';
+import Component from '../Component';
 import type Mithril from 'mithril';
 import classList from '../utils/classList';
 import { TooltipCreationOptions } from '../../../@types/tooltips';
 import extractText from '../utils/extractText';
 
-export interface TooltipAttrs extends ComponentAttrs {
+export interface TooltipAttrs extends Mithril.CommonAttributes<TooltipAttrs, Tooltip> {
   /**
    * Tooltip textual content.
    *
@@ -12,13 +12,6 @@ export interface TooltipAttrs extends ComponentAttrs {
    * into strings.
    */
   text: string | string[];
-  /**
-   * Defines the type of container to use. Chosen option defines the `display`
-   * property of the container element in CSS.
-   *
-   * Default: `'block'`.
-   */
-  containerType?: 'block' | 'inline' | 'inline-block';
   /**
    * Manually show tooltip. `false` will show based on cursor events.
    *
@@ -41,8 +34,8 @@ export interface TooltipAttrs extends ComponentAttrs {
    * 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.
+   * be used wherever possible, and may not work when we migrate to another
+   * tooltip library. Be prepared for this to break in Flarum stable.
    *
    * Default: `false`.
    *
@@ -53,8 +46,8 @@ export interface TooltipAttrs extends ComponentAttrs {
    * 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.
+   * **Warning:** this option may be removed when switching to another tooltip
+   * library. Be prepared for this to break in Flarum stable.
    *
    * Default: `0`.
    *
@@ -71,12 +64,15 @@ export interface TooltipAttrs extends ComponentAttrs {
 
 /**
  * The `Tooltip` component is used to create a tooltip for an element. It
- * surrounds it with a div (or span) which has the required tooltip setup
- * applied.
+ * requires a single child element to be passed to it. Passing multiple
+ * children or fragments will throw an error.
  *
  * You should use this for any tooltips you create to allow for backwards
- * compatibility when we switch to pure CSS tooltips instead of Bootstrap
- * tooltips.
+ * compatibility when we switch to another tooltip library instead of
+ * Bootstrap tooltips.
+ *
+ * If you need to pass multiple children, surround them with another element,
+ * such as a `<span>` or `<div>`.
  *
  * @example <caption>Basic usage</caption>
  *          <Tooltip text="You wish!">
@@ -87,29 +83,43 @@ export interface TooltipAttrs extends ComponentAttrs {
  *
  * @example <caption>Use of `position` and `showOnFocus` attrs</caption>
  *          <Tooltip text="Woah! That's cool!" position="bottom" showOnFocus>
- *            <div>3 replies</div>
+ *            <span>3 replies</span>
+ *          </Tooltip>
+ *
+ * @example <caption>Incorrect usage</caption>
+ *          // This is wrong! Surround the children with a <span> or similar.
+ *          <Tooltip text="This won't work">
+ *            Click
+ *            <a href="/">here</a>
  *          </Tooltip>
  */
 export default class Tooltip extends Component<TooltipAttrs> {
+  private firstChild: Mithril.Vnode<any, any> | null = null;
+  private childDomNode: HTMLElement | null = null;
+
   private oldText: string = '';
   private oldVisibility: boolean | undefined;
 
   private shouldRecreateTooltip: boolean = false;
   private shouldChangeTooltipVisibility: boolean = false;
 
-  view(vnode) {
-    const { children } = vnode;
+  view(vnode: Mithril.Vnode<TooltipAttrs, this>) {
+    /**
+     * We know this will be a ChildArray and not a primitive as this
+     * vnode is a component, not a text or trusted HTML vnode.
+     */
+    const children = vnode.children as Mithril.ChildArray | undefined;
 
     // We remove these to get the remaining attrs to pass to the DOM element
     const { text, tooltipVisible, showOnFocus = true, position = 'top', ignoreTitleWarning = false, html = false, delay = 0, ...attrs } = this.attrs;
 
-    if (this.attrs.title && !ignoreTitleWarning) {
+    if ((this.attrs as any).title && !ignoreTitleWarning) {
       console.warn(
         '`title` attribute was passed to Tooltip component. Was this intentional? Tooltip content should be passed to the `text` attr instead.'
       );
     }
 
-    const realText = Array.isArray(text) ? extractText(text) : text;
+    const realText = this.getRealText();
 
     // We need to recreate the tooltip if the text has changed
     if (realText !== this.oldText) {
@@ -122,28 +132,70 @@ export default class Tooltip extends Component<TooltipAttrs> {
       this.shouldChangeTooltipVisibility = true;
     }
 
-    return (
-      <div title={realText} className={classList('tooltip-container', `tooltip-container--${containerType}`, className, classes)} {...attrs}>
-        {children}
-      </div>
-    );
+    // We'll try our best to detect any issues created by devs before they cause any weird effects.
+    // Throwing an error will prevent the forum rendering, but will be better at alerting devs to
+    // an issue.
+
+    if (typeof children === 'undefined') {
+      throw new Error(
+        `Tooltip component was provided with no direct child DOM element. Tooltips must contain a single direct DOM node to attach to.`
+      );
+    }
+
+    if (children.length !== 1) {
+      throw new Error(
+        `Tooltip component was either passed more than one or no child node.\n\nPlease wrap multiple children in another element, such as a <div> or <span>.`
+      );
+    }
+
+    const firstChild = children[0];
+
+    if (typeof firstChild !== 'object' || Array.isArray(firstChild) || firstChild === null) {
+      throw new Error(
+        `Tooltip component was provided with no direct child DOM element. Tooltips must contain a single direct DOM node to attach to.`
+      );
+    }
+
+    if (typeof firstChild.tag === 'string' && ['#', '[', '<'].includes(firstChild.tag)) {
+      throw new Error(
+        `Tooltip component with provided with a vnode with tag "${firstChild.tag}". This is not a DOM element, so is not a valid child element. Please wrap this vnode in another element, such as a <div> or <span>.`
+      );
+    }
+
+    this.firstChild = firstChild;
+
+    return children;
   }
 
   oncreate(vnode: Mithril.VnodeDOM<TooltipAttrs, this>) {
     super.oncreate(vnode);
 
+    const domNode = (this.firstChild as Mithril.VnodeDOM<any, any>).dom as HTMLElement;
+
+    if (!domNode.isSameNode(this.childDomNode)) {
+      this.childDomNode = domNode;
+      this.shouldRecreateTooltip = true;
+    }
+
     this.recreateTooltip();
   }
 
   onupdate(vnode: Mithril.VnodeDOM<TooltipAttrs, this>) {
     super.onupdate(vnode);
 
+    const domNode = (this.firstChild as Mithril.VnodeDOM<any, any>).dom as HTMLElement;
+
+    if (!domNode.isSameNode(this.childDomNode)) {
+      this.childDomNode = domNode;
+      this.shouldRecreateTooltip = true;
+    }
+
     this.recreateTooltip();
   }
 
   private recreateTooltip() {
-    if (this.shouldRecreateTooltip) {
-      this.$().tooltip(
+    if (this.shouldRecreateTooltip && this.childDomNode !== null) {
+      $(this.childDomNode).tooltip(
         'destroy',
         // @ts-expect-error We don't want this arg to be part of the public API. It only exists to prevent deprecation warnings when using `$.tooltip` in this component.
         'DANGEROUS_tooltip_jquery_fn_deprecation_exempt'
@@ -159,14 +211,16 @@ export default class Tooltip extends Component<TooltipAttrs> {
   }
 
   private updateVisibility() {
+    if (this.childDomNode === null) return;
+
     if (this.attrs.tooltipVisible === true) {
-      this.$().tooltip(
+      $(this.childDomNode).tooltip(
         'show',
         // @ts-expect-error We don't want this arg to be part of the public API. It only exists to prevent deprecation warnings when using `$.tooltip` in this component.
         'DANGEROUS_tooltip_jquery_fn_deprecation_exempt'
       );
     } else if (this.attrs.tooltipVisible === false) {
-      this.$().tooltip(
+      $(this.childDomNode).tooltip(
         'hide',
         // @ts-expect-error We don't want this arg to be part of the public API. It only exists to prevent deprecation warnings when using `$.tooltip` in this component.
         'DANGEROUS_tooltip_jquery_fn_deprecation_exempt'
@@ -175,6 +229,8 @@ export default class Tooltip extends Component<TooltipAttrs> {
   }
 
   private createTooltip() {
+    if (this.childDomNode === null) return;
+
     const {
       showOnFocus = true,
       position = 'top',
@@ -182,14 +238,19 @@ export default class Tooltip extends Component<TooltipAttrs> {
       // This will have no effect when switching to CSS tooltips
       html = false,
       tooltipVisible,
+      text,
     } = this.attrs;
 
-    const trigger = (typeof tooltipVisible === 'boolean'
-      ? 'manual'
-      : classList('hover', [showOnFocus && 'focus'])) as TooltipCreationOptions['trigger'];
+    const trigger = (
+      typeof tooltipVisible === 'boolean' ? 'manual' : classList('hover', [showOnFocus && 'focus'])
+    ) as TooltipCreationOptions['trigger'];
+
+    const realText = this.getRealText();
+    this.childDomNode.setAttribute('title', realText);
+    this.childDomNode.setAttribute('aria-label', realText);
 
     // https://getbootstrap.com/docs/3.3/javascript/#tooltips-options
-    this.$().tooltip(
+    $(this.childDomNode).tooltip(
       {
         html,
         delay,
@@ -201,4 +262,10 @@ export default class Tooltip extends Component<TooltipAttrs> {
       'DANGEROUS_tooltip_jquery_fn_deprecation_exempt'
     );
   }
+
+  private getRealText(): string {
+    const { text } = this.attrs;
+
+    return Array.isArray(text) ? extractText(text) : text;
+  }
 }

From 674c22c3ed4529b9759982c26b314f8a2af972e0 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 10 May 2021 00:40:41 +0000
Subject: [PATCH 34/38] Use recreated Tooltip component in Badge

---
 js/src/common/components/Badge.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/js/src/common/components/Badge.js b/js/src/common/components/Badge.js
index d88319ecfd..f52099aee0 100644
--- a/js/src/common/components/Badge.js
+++ b/js/src/common/components/Badge.js
@@ -29,15 +29,11 @@ export default class Badge extends Component {
       ...attrs,
     };
 
+    const badgeNode = <div {...badgeAttrs}>{iconChild}</div>;
+
     // If we don't have a tooltip label, don't render the tooltip component.
-    if (typeof label !== 'string' && !Array.isArray(label)) {
-      return <div {...badgeAttrs}>{iconChild}</div>;
-    }
+    if (!label) return badgeNode;
 
-    return (
-      <Tooltip text={label} {...badgeAttrs}>
-        {iconChild}
-      </Tooltip>
-    );
+    return <Tooltip text={label}>{badgeNode}</Tooltip>;
   }
 }

From 6105a46d82452609ac934a5cd5a9faf1c2ead1c3 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 10 May 2021 00:43:12 +0000
Subject: [PATCH 35/38] Add warning about component overwriting `title` attr

---
 js/src/common/components/Tooltip.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index 8a2b3fc55d..fc4eaddccc 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -74,6 +74,10 @@ export interface TooltipAttrs extends Mithril.CommonAttributes<TooltipAttrs, Too
  * If you need to pass multiple children, surround them with another element,
  * such as a `<span>` or `<div>`.
  *
+ * **Note:** this component will overwrite the `title` attribute of the first
+ * child you pass to it, as this is how the current tooltip system works in
+ * Flarum. This shouldn't be an issue if you're using this component correctly.
+ *
  * @example <caption>Basic usage</caption>
  *          <Tooltip text="You wish!">
  *            <Button>

From a4b6675a392446413acbed20ddd024828161e05c Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 10 May 2021 01:54:57 +0100
Subject: [PATCH 36/38] Remove unused styles

---
 less/common/Tooltip.less | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/less/common/Tooltip.less b/less/common/Tooltip.less
index 319f768a2c..282c357363 100644
--- a/less/common/Tooltip.less
+++ b/less/common/Tooltip.less
@@ -1,15 +1,6 @@
 // ------------------------------------
 // Tooltips
 
-.tooltip-container {
-  &--inline {
-    display: inline;
-  }
-  &--inline-block {
-    display: inline-block;
-  }
-}
-
 // Base class
 .tooltip {
   position: absolute;

From b8987dbc865ba141cfed400de24fa88c98e55dfd Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 10 May 2021 01:55:16 +0100
Subject: [PATCH 37/38] Update previous uses of Tooltip component

---
 js/src/common/components/TextEditorButton.js  | 8 +-------
 js/src/forum/components/DiscussionListItem.js | 5 +++--
 js/src/forum/components/PostEdited.js         | 4 ++--
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/js/src/common/components/TextEditorButton.js b/js/src/common/components/TextEditorButton.js
index f92fd772d3..4f379ef400 100644
--- a/js/src/common/components/TextEditorButton.js
+++ b/js/src/common/components/TextEditorButton.js
@@ -9,17 +9,11 @@ export default class TextEditorButton extends Button {
   view(vnode) {
     const originalView = super.view(vnode);
 
-    console.log(originalView);
-
     // Steal tooltip label from the Button superclass
     const tooltipText = originalView.attrs.title;
     delete originalView.attrs.title;
 
-    return (
-      <Tooltip containerType="inline-block" text={tooltipText}>
-        {originalView}
-      </Tooltip>
-    );
+    return <Tooltip text={tooltipText}>{originalView}</Tooltip>;
   }
 
   static initAttrs(attrs) {
diff --git a/js/src/forum/components/DiscussionListItem.js b/js/src/forum/components/DiscussionListItem.js
index 5ead9fdeec..52c0958111 100644
--- a/js/src/forum/components/DiscussionListItem.js
+++ b/js/src/forum/components/DiscussionListItem.js
@@ -103,11 +103,12 @@ export default class DiscussionListItem extends Component {
 
         <div className={'DiscussionListItem-content Slidable-content' + (isUnread ? ' unread' : '') + (isRead ? ' read' : '')}>
           <Tooltip
-            className="DiscussionListItem-author"
             text={app.translator.trans('core.forum.discussion_list.started_text', { user, ago: humanTime(discussion.createdAt()) })}
             position="right"
           >
-            <Link href={user ? app.route.user(user) : '#'}>{avatar(user, { title: '' })}</Link>
+            <Link className="DiscussionListItem-author" href={user ? app.route.user(user) : '#'}>
+              {avatar(user, { title: '' })}
+            </Link>
           </Tooltip>
 
           <ul className="DiscussionListItem-badges badges">{listItems(discussion.badges().toArray())}</ul>
diff --git a/js/src/forum/components/PostEdited.js b/js/src/forum/components/PostEdited.js
index 871a977274..f93207c365 100644
--- a/js/src/forum/components/PostEdited.js
+++ b/js/src/forum/components/PostEdited.js
@@ -21,8 +21,8 @@ export default class PostEdited extends Component {
     const editedInfo = app.translator.trans('core.forum.post.edited_tooltip', { user: editedUser, ago: humanTime(post.editedAt()) });
 
     return (
-      <Tooltip containerType="inline" className="PostEdited" text={editedInfo}>
-        {app.translator.trans('core.forum.post.edited_text')}
+      <Tooltip text={editedInfo}>
+        <span class="PostEdited">{app.translator.trans('core.forum.post.edited_text')}</span>
       </Tooltip>
     );
   }

From 25e30bb6922a5ca177c5498ae799249f53732f80 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 10 May 2021 11:13:24 +0100
Subject: [PATCH 38/38] Refactor out duplicate logic

---
 js/src/common/components/Tooltip.tsx | 31 +++++++++++++++-------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/js/src/common/components/Tooltip.tsx b/js/src/common/components/Tooltip.tsx
index fc4eaddccc..13bc5590da 100644
--- a/js/src/common/components/Tooltip.tsx
+++ b/js/src/common/components/Tooltip.tsx
@@ -174,26 +174,14 @@ export default class Tooltip extends Component<TooltipAttrs> {
   oncreate(vnode: Mithril.VnodeDOM<TooltipAttrs, this>) {
     super.oncreate(vnode);
 
-    const domNode = (this.firstChild as Mithril.VnodeDOM<any, any>).dom as HTMLElement;
-
-    if (!domNode.isSameNode(this.childDomNode)) {
-      this.childDomNode = domNode;
-      this.shouldRecreateTooltip = true;
-    }
-
+    this.checkDomNodeChanged();
     this.recreateTooltip();
   }
 
   onupdate(vnode: Mithril.VnodeDOM<TooltipAttrs, this>) {
     super.onupdate(vnode);
 
-    const domNode = (this.firstChild as Mithril.VnodeDOM<any, any>).dom as HTMLElement;
-
-    if (!domNode.isSameNode(this.childDomNode)) {
-      this.childDomNode = domNode;
-      this.shouldRecreateTooltip = true;
-    }
-
+    this.checkDomNodeChanged();
     this.recreateTooltip();
   }
 
@@ -272,4 +260,19 @@ export default class Tooltip extends Component<TooltipAttrs> {
 
     return Array.isArray(text) ? extractText(text) : text;
   }
+
+  /**
+   * Checks if the tooltip DOM node has changed.
+   *
+   * If it has, it updates `this.childDomNode` to the new node, and sets
+   * `shouldRecreateTooltip` to `true`.
+   */
+  private checkDomNodeChanged() {
+    const domNode = (this.firstChild as Mithril.VnodeDOM<any, any>).dom as HTMLElement;
+
+    if (domNode && !domNode.isSameNode(this.childDomNode)) {
+      this.childDomNode = domNode;
+      this.shouldRecreateTooltip = true;
+    }
+  }
 }