[WIP] Add images to hover

src/components/fx/hover.js

@@ -1104,11 +1104,10 @@ function createHoverText(hoverData, opts, gd) {
             g.append('rect')
                 .call(Color.fill, Color.addOpacity(bgColor, 0.8));
             g.append('text').classed('name', true);
-            // trace data label (path and text.nums)
+            // trace data label (path and g.nums)
             g.append('path')
                 .style('stroke-width', '1px');
-            g.append('text').classed('nums', true)
-                .call(Drawing.font, fontFamily, fontSize);
+            g.append('g').classed('numbox', true);
         });
     hoverLabels.exit().remove();
 
@@ -1142,8 +1141,17 @@ function createHoverText(hoverData, opts, gd) {
         var name = texts[1];
 
         // main label
-        var tx = g.select('text.nums')
-            .call(Drawing.font,
+        var tj = g.select('g.numbox')
+            .selectAll('text.nums')
+            .data([0])
+
+        tj.enter().append('text').classed('nums', true);
+        tj.exit().remove();
+
+        // Reselect nested text.nums element(s)
+        var tx = g.select('g.numbox').selectAll('text.nums');
+
+        tx.call(Drawing.font,
                 d.fontFamily || fontFamily,
                 d.fontSize || fontSize,
                 d.fontColor || contrastColor)

src/components/fx/image_attributes.js

@@ -0,0 +1,45 @@
+/**
+* Copyright 2012-2021, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+module.exports = {
+    imageAttrs: {
+        source: {
+            dflt: '',
+            valType: 'string',
+            role: 'info',
+            editType: 'none',
+            arrayOk: true,
+            description: 'A URL to specify the image shown on hover.'
+        },
+        width: {
+            dflt: 0,
+            valType: 'integer',
+            role: 'info',
+            editType: 'none',
+            arrayOk: true,
+            description: ['Hover image width. Optional if image dimensions can be determined',
+                'synchronously from image data URL, otherwise must be specified up-front',
+                'for asynchronously loaded images'
+            ].join(' ')
+        },
+        height: {
+            dflt: 0,
+            valType: 'integer',
+            role: 'info',
+            editType: 'none',
+            arrayOk: true,
+            description: ['Hover image height. Optional if image dimensions can be determined',
+                'synchronously from image data URL, otherwise must be specified up-front',
+                'for asynchronously loaded images'
+            ].join(' ')
+        },
+        editType: 'none'
+    }
+};

src/traces/scatter/attributes.js

@@ -10,6 +10,7 @@
 
 var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
+var imageAttrs = require('../../components/fx/image_attributes').imageAttrs;
 var colorScaleAttrs = require('../../components/colorscale/attributes');
 var fontAttrs = require('../../plots/font_attributes');
 var dash = require('../../components/drawing/attributes').dash;
@@ -134,6 +135,8 @@ module.exports = {
     xperiodalignment: axisPeriodAlignment('x'),
     yperiodalignment: axisPeriodAlignment('y'),
 
+    image: imageAttrs,
+
     stackgroup: {
         valType: 'string',
         role: 'info',

src/traces/scatter/defaults.js

@@ -22,6 +22,7 @@ var handleLineDefaults = require('./line_defaults');
 var handleLineShapeDefaults = require('./line_shape_defaults');
 var handleTextDefaults = require('./text_defaults');
 var handleFillColorDefaults = require('./fillcolor_defaults');
+var handleImageDefaults= require('./image_defaults');
 
 module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     function coerce(attr, dflt) {
@@ -59,6 +60,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         handleTextDefaults(traceIn, traceOut, layout, coerce);
     }
 
+    handleImageDefaults(traceIn, traceOut, layout, coerce);
+
     var dfltHoverOn = [];
 
     if(subTypes.hasMarkers(traceOut) || subTypes.hasText(traceOut)) {

src/traces/scatter/image_defaults.js

@@ -0,0 +1,20 @@
+/**
+* Copyright 2012-2021, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+var Lib = require('../../lib');
+
+module.exports = function(traceIn, traceOut, layout, coerce, opts) {
+    opts = opts || {};
+
+    coerce('image.source');
+    coerce('image.width');
+    coerce('image.height');
+};