# Can't get plotly.js hover event example to work

**URL:** <https://community.plotly.com/t/cant-get-plotly-js-hover-event-example-to-work/819>\
**Category:** plotly.js\
**Created:** [April 7, 2016, 2:40pm UTC](https://community.plotly.com/t/cant-get-plotly-js-hover-event-example-to-work/819 "2016-04-07T14:40:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![abalter](https://avatars.discourse-cdn.com/v4/letter/a/ecae2f/32.png) [@abalter](https://community.plotly.com/u/abalter)\
**Post date:** [April 7, 2016, 2:40pm UTC](https://community.plotly.com/t/cant-get-plotly-js-hover-event-example-to-work/819/1 "2016-04-07T14:40:43Z")

</div>

I basically copied the hover event setup from the [online example](https://plot.ly/javascript/hover-events/), but am getting an error that the `hoverinfo` element (which seems like it is supposed to be generated by plotly) is not present. I have added a function to display this element, and indeed it does not exist in the DOM.

What am I doing wrong?

[https://jsfiddle.net/abalter/1qasvnth/](https://jsfiddle.net/abalter/1qasvnth/)

HTML:

```auto
<div id='myDiv'>
  Hello
</div>

```

Javascript:

```javascript
var dates = ["11/5/2013", "1/12/2014", "3/9/2014", "5/4/2014", "6/22/2014", "7/20/2014", "7/27/2014", "8/4/2014", "8/17/2014", "8/24/2014", "8/31/2014", "9/14/2014", "9/21/2014", "9/28/2014", "10/12/2014", "10/19/2014", "10/26/2014", "11/9/2014", "11/16/2014", "3/29/2015"];

var ca199 = [12395, 7367, 211, 400, 5706, 1131, 529, 283, 180, 280, 270, 266, 537, 758, 623, 1346, 1252, 1629, 5890, 6680];

makeScatterPlot(dates, ca199);

function toDate(d) {
  var parts = d.split('/');

  return new Date(parts[2], parts[0], parts[1]).getTime();
}

function makeScatterPlot(x, y) {

  console.log(x);
  console.log(y);

  var timeline = {
    x: x.map(toDate),
    y: y,
    mode: 'lines+markers',
    type: 'scatter'
  };

  data = [timeline];

  var layout = {
    title: "Title",
    displayModeBar: true,
    height: 300,
    width: 600,
    hovermode: 'closest',
    xaxis: {
      type: 'date',
      tickvals: x.map(toDate),
      ticktext: x,
      tickfont: {
        color: "rgb(107, 107, 107)",
        size: 11
      },
      ticks: "outside",
      tickwidth: 1,
      tickangle: 40,
      ticklen: 5,
      showticklabels: true,
      showline: false,
      showgrid: true,
      autorange: true,
    },
    yaxis: {
      showgrid: true,
    }
  };

  Plotly.newPlot(
    "myDiv",
    data,
    layout
  );

}

var myPlot = document.getElementById('myDiv');
var hoverInfo = document.getElementById('hoverinfo');
console.log("hoverInfo: " + hoverInfo);

document.addEventListener("DOMContentLoaded", function(event) {
  //your code to run since DOM is loaded and ready
  var allElements = document.getElementsByTagName("*");
  var allIds = [];
  for (var i = 0, n = allElements.length; i < n; ++i) {
    var el = allElements[i];
    if (el.id) {
      allIds.push(el.id);
    } else if (el.name) {
      allIds.push(el.name);
    }
  }
});

myPlot.on('plotly_hover', function(data) {
  var allElements = document.getElementsByTagName("*");
  var allIds = [];
  for (var i = 0, n = allElements.length; i < n; ++i) {
    var el = allElements[i];
    if (el.id) {
      allIds.push(el.id);
    } else if (el.name) {
      allIds.push(el.name);
    }
  }

  console.log(allIds);

  var local_hoverInfo = document.getElementById('hoverinfo');
  console.log("local_hoverInfo: " + local_hoverInfo);
  
  var pts = '';
  for (var i = 0; i < data.points.length; i++) {
    pts = 'x = ' + data.points[i].x + '\ny = ' +
      data.points[i].y.toPrecision(4) + '\n\n';
  }
  alert('point hovered:\n\n'+pts);
  //hoverInfo.innerHTML = pts;
});

```

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [April 7, 2016, 3:17pm UTC](https://community.plotly.com/t/cant-get-plotly-js-hover-event-example-to-work/819/2 "2016-04-07T15:17:40Z")

</div>

You need to add the hoverinfo `<div>` to your HTML.

In other works, your HTML does not match the HTML of the [https://plot.ly/javascript/hover-events/](https://plot.ly/javascript/hover-events/) example.

 ![](https://us1.discourse-cdn.com/flex024/uploads/plot/original/1X/103001eac175f2c9b619efca761e17c6592aaf7e.png)

---

<div class="post-metadata">

**Author:** ![abalter](https://avatars.discourse-cdn.com/v4/letter/a/ecae2f/32.png) [@abalter](https://community.plotly.com/u/abalter)\
**Post date:** [April 7, 2016, 4:04pm UTC](https://community.plotly.com/t/cant-get-plotly-js-hover-event-example-to-work/819/3 "2016-04-07T16:04:05Z")

</div>

…HA! So simple.

---

<div class="post-metadata">

**Author:** ![jack](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jack/32/11_2.png) [@jack](https://community.plotly.com/u/jack)\
**Post date:** [January 5, 2017, 9:40pm UTC](https://community.plotly.com/t/cant-get-plotly-js-hover-event-example-to-work/819/4 "2017-01-05T21:40:14Z")

</div>

Hiya! Plotly now has improved and consolidated Plotly.js event documentation here:

> **[Event Handlers](https://plot.ly/javascript/plotlyjs-events/)**
>
> Definitions and examples of how to use Plotly.js event handlers to add additional interactive capabilities to Plotly charts.

Please feel free to suggest documentation improvements in a pull request:

[https://github.com/plotly/documentation/tree/source-design-merge/\_posts/plotly\_js/events](https://github.com/plotly/documentation/tree/source-design-merge/_posts/plotly_js/events)