--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
@@ -38,28 +38,28 @@ function* testColorChangeIsntRevertedWhe
 
   yield simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], {
     selector: "body",
     name: "background-color",
     value: "rgb(0, 0, 0)"
   });
 
   let spectrum = yield picker.spectrum;
-  let onModifications = ruleView.once("ruleview-changed");
+
+  let onModifications = waitForNEvents(ruleView, "ruleview-changed", 2);
   let onHidden = picker.tooltip.once("hidden");
   EventUtils.sendKey("RETURN", spectrum.element.ownerDocument.defaultView);
   yield onHidden;
   yield onModifications;
 
   info("Open the image preview tooltip");
   let value = getRuleViewProperty(ruleView, "body", "background").valueSpan;
   let url = value.querySelector(".theme-link");
   onShown = ruleView.tooltips.previewTooltip.once("shown");
-  let anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip,
-                                          url);
+  let anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip, url);
   ruleView.tooltips.previewTooltip.show(anchor);
   yield onShown;
 
   info("Image tooltip is shown, verify that the swatch is still correct");
   swatch = value.querySelector(".ruleview-colorswatch");
   is(swatch.style.backgroundColor, "black",
     "The swatch's color is correct");
   is(swatch.nextSibling.textContent, "black", "The color name is correct");

--- a/devtools/client/inspector/shared/style-inspector-overlays.js
+++ b/devtools/client/inspector/shared/style-inspector-overlays.js
@@ -7,18 +7,24 @@
 "use strict";
 
 // The style-inspector overlays are:
 // - tooltips that appear when hovering over property values
 // - editor tooltips that appear when clicking color swatches, etc.
 // - in-content highlighters that appear when hovering over property values
 // - etc.
 
+const {getTheme} = require("devtools/client/shared/theme");
+const {HTMLTooltip} = require("devtools/client/shared/widgets/HTMLTooltip");
 const {
-  Tooltip,
+  getImageDimensions,
+  setImageTooltip,
+  setBrokenImageTooltip,
+} = require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper");
+const {
   SwatchColorPickerTooltip,
   SwatchCubicBezierTooltip,
   CssDocsTooltip,
   SwatchFilterTooltip
 } = require("devtools/client/shared/widgets/Tooltip");
 const EventEmitter = require("devtools/shared/event-emitter");
 const promise = require("promise");
 const {Task} = require("devtools/shared/task");
@@ -268,17 +274,19 @@ TooltipsOverlay.prototype = {
   addToView: function () {
     if (this._isStarted || this._isDestroyed) {
       return;
     }
 
     let panelDoc = this.view.inspector.panelDoc;
 
     // Image, fonts, ... preview tooltip
-    this.previewTooltip = new Tooltip(panelDoc);
+    this.previewTooltip = new HTMLTooltip(this.view.inspector.toolbox, {
+      type: "arrow"
+    });
     this.previewTooltip.startTogglingOnHover(this.view.element,
       this._onPreviewTooltipTargetHover.bind(this));
 
     // MDN CSS help tooltip
     this.cssDocs = new CssDocsTooltip(panelDoc);
 
     if (this.isRuleView) {
       // Color picker tooltip
@@ -390,33 +398,95 @@ TooltipsOverlay.prototype = {
     if (this.isRuleView && this.filterEditor.tooltip.isShown()) {
       this.filterEditor.revert();
       this.filterEdtior.hide();
     }
 
     let inspector = this.view.inspector;
 
     if (type === TOOLTIP_IMAGE_TYPE) {
-      let dim = Services.prefs.getIntPref(PREF_IMAGE_TOOLTIP_SIZE);
-      // nodeInfo contains an absolute uri
-      let uri = nodeInfo.value.url;
-      yield this.previewTooltip.setRelativeImageContent(uri,
-        inspector.inspector, dim);
+      try {
+        yield this._setImagePreviewTooltip(nodeInfo.value.url);
+      } catch (e) {
+        yield setBrokenImageTooltip(this.previewTooltip, this.view.inspector.panelDoc);
+      }
       return true;
     }
 
     if (type === TOOLTIP_FONTFAMILY_TYPE) {
-      yield this.previewTooltip.setFontFamilyContent(nodeInfo.value.value,
-        inspector.selection.nodeFront);
+      let font = nodeInfo.value.value;
+      let nodeFront = inspector.selection.nodeFront;
+      yield this._setFontPreviewTooltip(font, nodeFront);
       return true;
     }
 
     return false;
   }),
 
+  /**
+   * Set the content of the preview tooltip to display an image preview. The image URL can
+   * be relative, a call will be made to the debuggee to retrieve the image content as an
+   * imageData URI.
+   *
+   * @param {String} imageUrl
+   *        The image url value (may be relative or absolute).
+   * @return {Promise} A promise that resolves when the preview tooltip content is ready
+   */
+  _setImagePreviewTooltip: Task.async(function* (imageUrl) {
+    let doc = this.view.inspector.panelDoc;
+    let maxDim = Services.prefs.getIntPref(PREF_IMAGE_TOOLTIP_SIZE);
+
+    let naturalWidth, naturalHeight;
+    if (imageUrl.startsWith("data:")) {
+      // If the imageUrl already is a data-url, save ourselves a round-trip
+      let size = yield getImageDimensions(doc, imageUrl);
+      naturalWidth = size.naturalWidth;
+      naturalHeight = size.naturalHeight;
+    } else {
+      let inspectorFront = this.view.inspector.inspector;
+      let {data, size} = yield inspectorFront.getImageDataFromURL(imageUrl, maxDim);
+      imageUrl = yield data.string();
+      naturalWidth = size.naturalWidth;
+      naturalHeight = size.naturalHeight;
+    }
+
+    yield setImageTooltip(this.previewTooltip, doc, imageUrl,
+      {maxDim, naturalWidth, naturalHeight});
+  }),
+
+  /**
+   * Set the content of the preview tooltip to display a font family preview.
+   *
+   * @param {String} font
+   *        The font family value.
+   * @param {object} nodeFront
+   *        The NodeActor that will used to retrieve the dataURL for the font
+   *        family tooltip contents.
+   * @return {Promise} A promise that resolves when the preview tooltip content is ready
+   */
+  _setFontPreviewTooltip: Task.async(function* (font, nodeFront) {
+    if (!font || !nodeFront || typeof nodeFront.getFontFamilyDataURL !== "function") {
+      throw new Error("Unable to create font preview tooltip content.");
+    }
+
+    font = font.replace(/"/g, "'");
+    font = font.replace("!important", "");
+    font = font.trim();
+
+    let fillStyle = getTheme() === "light" ? "black" : "white";
+    let {data, size: maxDim} = yield nodeFront.getFontFamilyDataURL(font, fillStyle);
+
+    let imageUrl = yield data.string();
+    let doc = this.view.inspector.panelDoc;
+    let {naturalWidth, naturalHeight} = yield getImageDimensions(doc, imageUrl);
+
+    yield setImageTooltip(this.previewTooltip, doc, imageUrl,
+      {hideDimensionLabel: true, maxDim, naturalWidth, naturalHeight});
+  }),
+
   _onNewSelection: function () {
     if (this.previewTooltip) {
       this.previewTooltip.hide();
     }
 
     if (this.colorPicker) {
       this.colorPicker.hide();
     }

--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-background-image.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-background-image.js
@@ -60,33 +60,33 @@ function* testBodyRuleView(view) {
   ok(panel, "XUL panel exists");
 
   // Get the background-image property inside the rule view
   let {valueSpan} = getRuleViewProperty(view, "body", "background-image");
   let uriSpan = valueSpan.querySelector(".theme-link");
 
   yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);
 
-  let images = panel.getElementsByTagName("image");
+  let images = panel.getElementsByTagName("img");
   is(images.length, 1, "Tooltip contains an image");
   ok(images[0].getAttribute("src")
     .indexOf("iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHe") !== -1,
     "The image URL seems fine");
 }
 
 function* testDivRuleView(view) {
   let panel = view.tooltips.previewTooltip.panel;
 
   // Get the background property inside the rule view
   let {valueSpan} = getRuleViewProperty(view, ".test-element", "background");
   let uriSpan = valueSpan.querySelector(".theme-link");
 
   yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);
 
-  let images = panel.getElementsByTagName("image");
+  let images = panel.getElementsByTagName("img");
   is(images.length, 1, "Tooltip contains an image");
   ok(images[0].getAttribute("src").startsWith("data:"),
     "Tooltip contains a data-uri image as expected");
 }
 
 function* testTooltipAppearsEvenInEditMode(view) {
   info("Switching to edit mode in the rule view");
   let editor = yield turnToEditMode(view);
@@ -112,14 +112,14 @@ function* testComputedView(view) {
   let panel = tooltip.panel;
   ok(panel, "The computed-view tooltip has a XUL panel");
 
   let {valueSpan} = getComputedViewProperty(view, "background-image");
   let uriSpan = valueSpan.querySelector(".theme-link");
 
   yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);
 
-  let images = panel.getElementsByTagName("image");
+  let images = panel.getElementsByTagName("img");
   is(images.length, 1, "Tooltip contains an image");
 
   ok(images[0].getAttribute("src").startsWith("data:"),
     "Tooltip contains a data-uri in the computed-view too");
 }

--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
@@ -2,16 +2,17 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that if a tooltip is visible when a new selection is made, it closes
 
 const TEST_URI = "<div class='one'>el 1</div><div class='two'>el 2</div>";
+const XHTML_NS = "http://www.w3.org/1999/xhtml";
 
 add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   yield selectNode(".one", inspector);
 
   info("Testing rule view tooltip closes on new selection");
   yield testRuleView(view, inspector);
@@ -20,17 +21,19 @@ add_task(function* () {
   view = selectComputedView(inspector);
   yield testComputedView(view, inspector);
 });
 
 function* testRuleView(ruleView, inspector) {
   info("Showing the tooltip");
 
   let tooltip = ruleView.tooltips.previewTooltip;
-  tooltip.setTextContent({messages: ["rule-view tooltip"]});
+  let tooltipContent = ruleView.styleDocument.createElementNS(XHTML_NS, "div");
+  yield tooltip.setContent(tooltipContent, 100, 30);
+
   // Stop listening for mouse movements because it's not needed for this test,
   // and causes intermittent failures on Linux. When this test runs in the suite
   // sometimes a mouseleave event is dispatched at the start, which causes the
   // tooltip to hide in the middle of being shown, which causes timeouts later.
   tooltip.stopTogglingOnHover();
 
   let onShown = tooltip.once("shown");
   tooltip.show(ruleView.styleDocument.firstElementChild);
@@ -43,17 +46,18 @@ function* testRuleView(ruleView, inspect
 
   ok(true, "Rule view tooltip closed after a new node got selected");
 }
 
 function* testComputedView(computedView, inspector) {
   info("Showing the tooltip");
 
   let tooltip = computedView.tooltips.previewTooltip;
-  tooltip.setTextContent({messages: ["computed-view tooltip"]});
+  let tooltipContent = computedView.styleDocument.createElementNS(XHTML_NS, "div");
+  yield tooltip.setContent(tooltipContent, 100, 30);
   // Stop listening for mouse movements because it's not needed for this test,
   // and causes intermittent failures on Linux. When this test runs in the suite
   // sometimes a mouseleave event is dispatched at the start, which causes the
   // tooltip to hide in the middle of being shown, which causes timeouts later.
   tooltip.stopTogglingOnHover();
 
   let onShown = tooltip.once("shown");
   tooltip.show(computedView.styleDocument.firstElementChild);

--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
@@ -46,17 +46,17 @@ function* testRuleView(ruleView, nodeFro
 
   // Get the font family property inside the rule view
   let {valueSpan} = getRuleViewProperty(ruleView, "#testElement",
     "font-family");
 
   // And verify that the tooltip gets shown on this property
   yield assertHoverTooltipOn(tooltip, valueSpan);
 
-  let images = panel.getElementsByTagName("image");
+  let images = panel.getElementsByTagName("img");
   is(images.length, 1, "Tooltip contains an image");
   ok(images[0].getAttribute("src").startsWith("data:"),
     "Tooltip contains a data-uri image as expected");
 
   let dataURL = yield getFontFamilyDataURL(valueSpan.textContent, nodeFront);
   is(images[0].getAttribute("src"), dataURL,
     "Tooltip contains the correct data-uri image");
 }
@@ -65,17 +65,17 @@ function* testComputedView(computedView,
   info("Testing font-family tooltips in the computed view");
 
   let tooltip = computedView.tooltips.previewTooltip;
   let panel = tooltip.panel;
   let {valueSpan} = getComputedViewProperty(computedView, "font-family");
 
   yield assertHoverTooltipOn(tooltip, valueSpan);
 
-  let images = panel.getElementsByTagName("image");
+  let images = panel.getElementsByTagName("img");
   is(images.length, 1, "Tooltip contains an image");
   ok(images[0].getAttribute("src").startsWith("data:"),
     "Tooltip contains a data-uri image as expected");
 
   let dataURL = yield getFontFamilyDataURL(valueSpan.textContent, nodeFront);
   is(images[0].getAttribute("src"), dataURL,
     "Tooltip contains the correct data-uri image");
 }
@@ -92,17 +92,17 @@ function* testExpandedComputedViewProper
   let valueSpan = propertyView.matchedSelectorsContainer
     .querySelector(".bestmatch .other-property-value");
 
   let tooltip = computedView.tooltips.previewTooltip;
   let panel = tooltip.panel;
 
   yield assertHoverTooltipOn(tooltip, valueSpan);
 
-  let images = panel.getElementsByTagName("image");
+  let images = panel.getElementsByTagName("img");
   is(images.length, 1, "Tooltip contains an image");
   ok(images[0].getAttribute("src").startsWith("data:"),
     "Tooltip contains a data-uri image as expected");
 
   let dataURL = yield getFontFamilyDataURL(valueSpan.textContent, nodeFront);
   is(images[0].getAttribute("src"), dataURL,
     "Tooltip contains the correct data-uri image");
 }

--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-multiple-background-images.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-multiple-background-images.js
@@ -40,17 +40,17 @@ function* testComputedViewUrls(inspector
   yield performChecks(view, valueSpan);
 }
 
 /**
  * A helper that checks url() tooltips contain correct images
  */
 function* performChecks(view, propertyValue) {
   function checkTooltip(panel, imageSrc) {
-    let images = panel.getElementsByTagName("image");
+    let images = panel.getElementsByTagName("img");
     is(images.length, 1, "Tooltip contains an image");
     is(images[0].getAttribute("src"), imageSrc, "The image URL is correct");
   }
 
   let links = propertyValue.querySelectorAll(".theme-link");
   let panel = view.tooltips.previewTooltip.panel;
 
   info("Checking first link tooltip");

--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js
@@ -42,17 +42,17 @@ function* testRuleView(ruleView, nodeFro
 
   let rule = getRuleViewRule(ruleView, "#testElement");
   let valueSpan = rule
     .querySelector(".ruleview-computed .ruleview-propertyvalue");
 
   // And verify that the tooltip gets shown on this property
   yield assertHoverTooltipOn(tooltip, valueSpan);
 
-  let images = panel.getElementsByTagName("image");
+  let images = panel.getElementsByTagName("img");
   is(images.length, 1, "Tooltip contains an image");
   ok(images[0].getAttribute("src")
     .startsWith("data:"), "Tooltip contains a data-uri image as expected");
 
   let dataURL = yield getFontFamilyDataURL(valueSpan.textContent, nodeFront);
   is(images[0].getAttribute("src"), dataURL,
     "Tooltip contains the correct data-uri image");
 }

--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-size.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-size.js
@@ -34,22 +34,22 @@ function* testImageDimension(ruleView) {
   let uriSpan = valueSpan.querySelector(".theme-link");
 
   // Make sure there is a hover tooltip for this property, this also will fill
   // the tooltip with its content
   yield assertHoverTooltipOn(tooltip, uriSpan);
 
   info("Showing the tooltip");
   let onShown = tooltip.once("shown");
-  tooltip.show();
+  tooltip.show(uriSpan);
   yield onShown;
 
   // Let's not test for a specific size, but instead let's make sure it's at
   // least as big as the image
-  let imageRect = panel.querySelector("image").getBoundingClientRect();
+  let imageRect = panel.querySelector("img").getBoundingClientRect();
   let panelRect = panel.getBoundingClientRect();
 
   ok(panelRect.width >= imageRect.width,
     "The panel is wide enough to show the image");
   ok(panelRect.height >= imageRect.height,
     "The panel is high enough to show the image");
 
   let onHidden = tooltip.once("hidden");

--- a/devtools/client/shared/widgets/Tooltip.js
+++ b/devtools/client/shared/widgets/Tooltip.js
@@ -13,17 +13,16 @@ const {MdnDocsWidget} = require("devtool
 const {CSSFilterEditorWidget} = require("devtools/client/shared/widgets/FilterWidget");
 const {TooltipToggle} = require("devtools/client/shared/widgets/tooltip/TooltipToggle");
 const EventEmitter = require("devtools/shared/event-emitter");
 const {colorUtils} = require("devtools/client/shared/css-color");
 const Heritage = require("sdk/core/heritage");
 const {Eyedropper} = require("devtools/client/eyedropper/eyedropper");
 const Editor = require("devtools/client/sourceeditor/editor");
 const Services = require("Services");
-const {Task} = require("devtools/shared/task");
 
 loader.lazyRequireGetter(this, "beautify", "devtools/shared/jsbeautify/beautify");
 loader.lazyRequireGetter(this, "setNamedTimeout", "devtools/client/shared/widgets/view-helpers", true);
 loader.lazyRequireGetter(this, "clearNamedTimeout", "devtools/client/shared/widgets/view-helpers", true);
 loader.lazyRequireGetter(this, "setNamedTimeout", "devtools/client/shared/widgets/view-helpers", true);
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
@@ -516,56 +515,31 @@ Tooltip.prototype = {
     widget.controller.setSingleVariable(
       { objectActor: objectActor }, controllerOptions);
 
     this.content = vbox;
     this.panel.setAttribute("clamped-dimensions", "");
   },
 
   /**
-   * Uses the provided inspectorFront's getImageDataFromURL method to resolve
-   * the relative URL on the server-side, in the page context, and then sets the
-   * tooltip content with the resulting image just like |setImageContent| does.
-   * @return a promise that resolves when the image is shown in the tooltip or
-   * resolves when the broken image tooltip content is ready, but never rejects.
-   */
-  setRelativeImageContent: Task.async(function* (imageUrl, inspectorFront,
-                                                 maxDim) {
-    if (imageUrl.startsWith("data:")) {
-      // If the imageUrl already is a data-url, save ourselves a round-trip
-      this.setImageContent(imageUrl, {maxDim: maxDim});
-    } else if (inspectorFront) {
-      try {
-        let {data, size} = yield inspectorFront.getImageDataFromURL(imageUrl,
-                                                                    maxDim);
-        size.maxDim = maxDim;
-        let str = yield data.string();
-        this.setImageContent(str, size);
-      } catch (e) {
-        this.setBrokenImageContent();
-      }
-    }
-  }),
-
-  /**
    * Fill the tooltip with a message explaining the the image is missing
    */
   setBrokenImageContent: function () {
     this.setTextContent({
       messages: [
         l10n.strings.GetStringFromName("previewTooltip.image.brokenImage")
       ]
     });
   },
 
   /**
    * Fill the tooltip with an image and add the image dimension at the bottom.
    *
    * Only use this for absolute URLs that can be queried from the devtools
-   * client-side. For relative URLs, use |setRelativeImageContent|.
+   * client-side.
    *
    * @param {string} imageUrl
    *        The url to load the image from
    * @param {Object} options
    *        The following options are supported:
    *        - resized : whether or not the image identified by imageUrl has been
    *        resized before this function was called.
    *        - naturalWidth/naturalHeight : the original size of the image before
@@ -764,48 +738,16 @@ Tooltip.prototype = {
           def.resolve(widget);
         }, true);
       }
       return def.promise;
     }
   },
 
   /**
-   * Set the content of the tooltip to display a font family preview.
-   * This is based on Lea Verou's Dablet.
-   * See https://github.com/LeaVerou/dabblet
-   * for more info.
-   * @param {String} font The font family value.
-   * @param {object} nodeFront
-   *        The NodeActor that will used to retrieve the dataURL for the font
-   *        family tooltip contents.
-   * @return A promise that resolves when the font tooltip content is ready, or
-   *         rejects if no font is provided
-   */
-  setFontFamilyContent: Task.async(function* (font, nodeFront) {
-    if (!font || !nodeFront) {
-      throw new Error("Missing font");
-    }
-
-    if (typeof nodeFront.getFontFamilyDataURL === "function") {
-      font = font.replace(/"/g, "'");
-      font = font.replace("!important", "");
-      font = font.trim();
-
-      let fillStyle =
-          (Services.prefs.getCharPref("devtools.theme") === "light") ?
-          "black" : "white";
-
-      let {data, size} = yield nodeFront.getFontFamilyDataURL(font, fillStyle);
-      let str = yield data.string();
-      this.setImageContent(str, { hideDimensionLabel: true, maxDim: size });
-    }
-  }),
-
-  /**
    * Set the content of this tooltip to the MDN docs widget.
    *
    * This is called when the tooltip is first constructed.
    *
    * @return {promise} A promise which is resolved with an MdnDocsWidget.
    *
    * It loads the tooltip's structure from a separate XHTML file
    * into an iframe. When the iframe is loaded it constructs