Fix tooltip on <img> and other replaced elements

docs/content/components/tooltip.md

@@ -13,3 +13,15 @@ Use the standard `title` attribute on any element to render a tooltip with smoot
 <a href="#" title="View your profile">Profile</a>
 ```
 {% end %}
+
+### Special Elements
+
+The technique used to display these tooltips won't work on a few HTML elements, most notably `<img>`, so the native browser tooltip will be shown. To work around this issue, simply wrap those elements into another (e.g. `<div>` or `<span>`), and move the `title` attribute onto that parent element:
+
+```html
+<span title="A title for the image">
+    <img src="...">
+</span>
+```
+
+Other elements affected by this are `<input type="image">`, `<video>`, `<embed>`, `<iframe>`, `<fencedframe>`, `<audio>`, `<canvas>`, and `<object>`.

src/js/tooltip.js

@@ -6,7 +6,19 @@
 
 document.addEventListener('DOMContentLoaded', () => {
   const _attrib = 'title', _sel = '[title]';
+  // https://developer.mozilla.org/en-US/docs/Glossary/Replaced_elements
+  const _replacedElements = [
+    'img', 'video', 'embed', 'iframe', 'fencedframe',
+    // The following three elements are only sometimes considered replaced, but
+    // we'll skip them nonetheless to at least get the native browser tooltip
+    // if they can have it.
+    'audio', 'canvas', 'object',
+  ];
+  const isReplacedElement = el => _replacedElements.includes(el.localName);
+  const isInputImage = el => el.localName == 'input' && el.type == 'image';
+
   const apply = el => {
+    if (isReplacedElement(el) || isInputImage(el)) return;
     const t = el.getAttribute(_attrib);
     if (!t) return;
     el.setAttribute('data-tooltip', t);