Tooltip with border that isn't rectangular

Draws an image on a canvas-element that is used as a background on a div-element that is positioned absolutely to make the border to appear to not be rectangular.

by Web Carvers

HTML

<li class='tooltip'>
    <img src='http://www.craiglotter.co.za/wp-content/uploads/2009/12/craig_question_mark_icon1.png' alt='Help' />
    <ul class="tooltipText">
        <li class='info'>Some text to fill the box with.</li>
    </ul>
</li>

CSS

li{
   display:block;
}
li.tooltip
{
  position:relative;
  display:inline-block;
  cursor:pointer;
  width:300px;
  text-align:right;
}
li.tooltip > ul li.info
{
  display:none;
}
li.tooltip > ul li.info_container
{
  position:absolute;
  right:20px;
  width:200px;
  height:100px;
  display:none;
    color:#000;
}
li.tooltip ul li.info
{
  text-align:left;
  position:absolute;
  left:1px;
  right:1px;
  top:20px;
  bottom:1px;
  color:#000;
  padding:5px;
  overflow:auto;
  border:1px solid #000;
}

JavaScript

"use strict";

function click(event) {
    var elem = this.parentNode.querySelector('.info_container');
    if (elem) 
        elem.style.display = elem.style.display === 'block' ? 'none' : 'block';
}

function toolify() {
    var idx,
    len,
    elem,
    info,
    text,
    elements = document.querySelectorAll('li.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('li');
    pointer.style.width = canvas.width + 'px';
    pointer.style.height = canvas.height + 'px';
    pointer.innerHTML = '&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
    
    console.log(elements.length);
    for (idx = 0, len = elements.length; idx < len; ++idx) {
        elem = elements[idx];
        elem.querySelector('img').addEventListener('click', click);
        text =...