mouseover event not triggering on an xhtml element - d3.js

Question

Nothing happens on mouseover with the following code and I wanted to know if I am doing something wrong or if it is just not possible to get mouse events on xhtml elements?

var tweetsText = tweetsSvg.selectAll('foreignObject.tweetText')
    .data(_data);

tweetsText.enter().append('foreignObject')
.attr('class', 'tweetText')
.append("xhtml:div")
.html(function(d) {
    return '<div style="color: #ededed">' + d.text + '</div>';
})
.on('mouseover', conosle.log('Mouseover'));

Answer 1

You need to use a function as the callback for your event handler. Try it like this:

.on('mouseover', function() {
  console.log('Mouseover');
});