title: R plotly: Display image on hover
body: <p>I am trying to reproduce <a href="https://plotly-r.com/interactives/tooltip-image.html" rel="nofollow noreferrer">this</a> simple plotly graph that shows images on datapoint hover. The code is available <a href="https://plotly-r.com/supplying-custom-data.html" rel="nofollow noreferrer">here</a>.</p>
  <p>However, I am failing to reproduce it. This is what I have so far:</p>
  <pre class="lang-r prettyprint-override"><code>library(htmlwidgets)
  library(magrittr)
  library(plotly)
  
  js &lt;- &quot;
  function(el) {
      var tooltip = Plotly.d3.select('#' + el.id + ' .svg-container')
        .append(\&quot;div\&quot;)
        .attr(\&quot;class\&quot;, \&quot;my-custom-tooltip\&quot;);
    
      el.on('plotly_hover', function(d) {
        var pt = d.points[0];
        // Choose a location (on the data scale) to place the image
        // Here I'm picking the top-left corner of the graph
        var x = pt.xaxis.range[0];
        var y = pt.yaxis.range[1];
        // Transform the data scale to the pixel scale
        var xPixel = pt.xaxis.l2p(x) + pt.xaxis._offset;
        var yPixel = pt.yaxis.l2p(y) + pt.yaxis._offset;
        // Insert the base64 encoded image
        var img = \&quot;&lt;img src='\&quot; +  pt.customdata + \&quot;' width=100&gt;\&quot;;
        tooltip.html(img)
          .style(\&quot;position\&quot;, \&quot;absolute\&quot;)
          .style(\&quot;left\&quot;, xPixel + \&quot;px\&quot;)
          .style(\&quot;top\&quot;, yPixel + \&quot;px\&quot;);
        // Fade in the image
        tooltip.transition()
          .duration(300)
          .style(\&quot;opacity\&quot;, 1);
      });
    
      el.on('plotly_unhover', function(d) {
        // Fade out the image
        tooltip.transition()
          .duration(500)
          .style(\&quot;opacity\&quot;, 0);
      });
  };
  &quot;
  
  x &lt;- 1:3 
  y &lt;- 1:3
  
  artists &lt;- c(&quot;Bethoven&quot;, &quot;Mozart&quot;, &quot;Bach&quot;)
  
  image_links &lt;- c(
    &quot;https://upload.wikimedia.org/wikipedia/commons/6/6f/Beethoven.jpg&quot;,
    &quot;https://upload.wikimedia.org/wikipedia/commons/4/47/Croce-Mozart-Detail.jpg&quot;,
    &quot;https://upload.wikimedia.org/wikipedia/commons/6/6a/Johann_Sebastian_Bach.jpg&quot;
  )
  
  # hoverinfo = &quot;none&quot; will hide the plotly.js tooltip, but the 
  # plotly_hover event will still fire
  plot_ly(hoverinfo = &quot;none&quot;) %&gt;%
    add_text(x = x, y = y, customdata = image_links, text = artists) %&gt;%
    htmlwidgets::onRender(js)
  </code></pre>
  <p>Nothing happens on hover and the console is throwing the following error:</p>
  <pre class="lang-js prettyprint-override"><code>htmlwidgets.js:261 Uncaught SyntaxError: Unexpected token ';'
      at tryEval (htmlwidgets.js:252:32)
      at htmlwidgets.js:236:24
      at Array.forEach (&lt;anonymous&gt;)
      at forEach (htmlwidgets.js:55:14)
      at evalAndRun (htmlwidgets.js:230:7)
      at htmlwidgets.js:654:11
      at Array.forEach (&lt;anonymous&gt;)
      at forEach (htmlwidgets.js:55:14)
      at htmlwidgets.js:576:7
      at Array.forEach (&lt;anonymous&gt;)
  </code></pre>
  <p>What am I doing wrong here?</p>
  <p>Also, would it be possible to display the tooltip (e.g., as defined in <code>text</code>) while displaying the image on hover?</p>