provide description for hover on other positions

Author: archmoj

src/plots/template_attributes.js

@@ -4,15 +4,20 @@ var docs = require('../constants/docs');
 var FORMAT_LINK = docs.FORMAT_LINK;
 var DATE_FORMAT_LINK = docs.DATE_FORMAT_LINK;
 
-var templateFormatStringDescription = [
-    'Variables are inserted using %{variable}, for example "y: %{y}".',
-    'Numbers are formatted using d3-format\'s syntax %{variable:d3-format}, for example "Price: %{y:$.2f}".',
-    FORMAT_LINK,
-    'for details on the formatting syntax.',
-    'Dates are formatted using d3-time-format\'s syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}".',
-    DATE_FORMAT_LINK,
-    'for details on the date formatting syntax.'
-].join(' ');
+function templateFormatStringDescription(opts) {
+    var supportOther = opts && opts.supportOther;
+
+    return [
+        'Variables are inserted using %{variable},',
+        'for example "y: %{y}".' + (supportOther ? ' as well as %{xother} when positions do not match' : ''),
+        'Numbers are formatted using d3-format\'s syntax %{variable:d3-format}, for example "Price: %{y:$.2f}".',
+        FORMAT_LINK,
+        'for details on the formatting syntax.',
+        'Dates are formatted using d3-time-format\'s syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}".',
+        DATE_FORMAT_LINK,
+        'for details on the date formatting syntax.'
+    ].join(' ');
+}
 
 function describeVariables(extra) {
     var descPart = extra.description ? ' ' + extra.description : '';
@@ -45,7 +50,7 @@ exports.hovertemplateAttrs = function(opts, extra) {
         description: [
             'Template string used for rendering the information that appear on hover box.',
             'Note that this will override `hoverinfo`.',
-            templateFormatStringDescription,
+            templateFormatStringDescription({supportOther: true}),
             'The variables available in `hovertemplate` are the ones emitted as event data described at this link https://plotly.com/javascript/plotlyjs-events/#event-data.',
             'Additionally, every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available.',
             descPart,
@@ -74,7 +79,7 @@ exports.texttemplateAttrs = function(opts, extra) {
         description: [
             'Template string used for rendering the information text that appear on points.',
             'Note that this will override `textinfo`.',
-            templateFormatStringDescription,
+            templateFormatStringDescription(),
             'Every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available.',
             descPart
         ].join(' ')