title: addEventListener doesn't work in IE (tested in IE8)
body: <p>Work in Chrome and Firefox but not in IE. <a href="http://jsfiddle.net/some/66nLy/" rel="nofollow noreferrer">Fiddle</a><br/>
  I have tried solution from <a href="http://rubayathasan.com/tutorial/ie8-addeventlistener-alternative-example/" rel="nofollow noreferrer">here</a> but doesn't help.<br/></p>
  
  <pre><code>    if(window.attachEvent){
      // Attach event code here   
      window.attachEvent("load", toolify);
  }
  else{
      // Addeventlistener code here
      window.addEventListener('load',toolify,false);
  }
  </code></pre>
  
  <p>Error from IE:</p>
  
  <pre><code>Webpage error details
  
  User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
  Timestamp: Sat, 23 Nov 2013 08:10:42 UTC
  
  
  Message: Object doesn't support this property or method
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;title&gt;Your Website&lt;/title&gt;
      &lt;script&gt;
  
  
      "use strict";
  function click(event) {
    var elem = this.parentNode.querySelector('div.info_container');
    if (elem) elem.style.display = elem.style.display === 'block' ? 'none' : 'block';
  }
  function toolify() {
    var idx,
        len,
        elem,
        info,
        text,
        elements = document.querySelectorAll('div.tooltip'),
        canvas,
        imgurl,
        pointer,
        tipHeight = 20,
        tipWidth = 20,
        width = 200,
        height = 100,
        ctx;
  
    // Create a canvas element where the triangle will be drawn
    canvas = document.createElement('canvas');
    canvas.width = tipHeight;
    canvas.height = tipWidth;
    ctx = canvas.getContext('2d');
  
    ctx.strokeStyle = '#000';   // Border color
    ctx.fillStyle = '#fff';     // background color
    ctx.lineWidth = 1;
  
    ctx.translate(-0.5,-0.5);   // Move half pixel to make sharp lines
    ctx.beginPath();
    ctx.moveTo(1,canvas.height);              // lower left corner
    ctx.lineTo(canvas.width, 1);              // upper right corner
    ctx.lineTo(canvas.width,canvas.height);   // lower right corner
    ctx.fill();                               // fill the background
    ctx.stroke();                             // stroke it with border
    //fix bottom row
    ctx.fillRect(0,canvas.height-0.5,canvas.width-1,canvas.height+2);
  
    // Create a div element where the triangel will be set as background
    pointer = document.createElement('div');
    pointer.style.width = canvas.width + 'px';
    pointer.style.height = canvas.height + 'px';
    pointer.innerHTML = '&amp;nbsp;' // non breaking space
    pointer.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
    pointer.style.position = 'absolute';
    pointer.style.top = '2px';
    pointer.style.right = '1px';
    pointer.style.zIndex = '1'; // place it over the other elements
  
    for (idx=0, len=elements.length; idx &lt; len; ++idx) {
      elem = elements[idx];
      elem.querySelector('img').addEventListener('click',click);
      text = elem.querySelector('div.info');
      // Create a new div element, and place the text and pointer in it
      info = document.createElement('div');
      text.parentNode.replaceChild(info,text);
      info.className = 'info_container';
      info.appendChild(pointer.cloneNode());
      info.appendChild(text);
      //info.addEventListener('click',click);
    }
  }
  window.addEventListener('load',toolify);
      &lt;/script&gt;
      &lt;style&gt;
      div.tooltip
  {
    position:relative;
    display:inline-block;
    width:300px;
    text-align:right;
  }
  div.tooltip &gt; div.info
  {
    display:none;
  }
  div.tooltip div.info_container
  {
    position:absolute;
    right:20px;
    width:200px;
    height:100px;
    display:none;
  }
  div.tooltip div.info
  {
    text-align:left;
    position:absolute;
    left:1px;
    right:1px;
    top:20px;
    bottom:1px;
    color:#000;
    padding:5px;
    overflow:auto;
    border:1px solid #000;
  }
  
      &lt;/style&gt;
  &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class='tooltip'&gt;
    &lt;img src='http://www.craiglotter.co.za/wp-content/uploads/2009/12/craig_question_mark_icon1.png' alt='Help'/&gt;
    &lt;div class='info'&gt;
      Some text to fill the box with.
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='tooltip'&gt;
    &lt;img src='http://www.craiglotter.co.za/wp-content/uploads/2009/12/craig_question_mark_icon1.png' alt='Help'/&gt;
    &lt;div class='info'&gt;
      Some text to fill the box with.   
    &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;/body&gt;
  
  &lt;html&gt;
  </code></pre>