Mouse hover not working on overlapped elements

Question

In the following pie chart plugin, the tool-tip title are not showing for some of the elements.

http://jsfiddle.net/QzWrL/5/

$.widget("ui.piechart", {
    options: {
        width: 400,
        height: 200,
        data: null,
        labels: null,
        legendcolorwidth: '20px',
        legendwidth: '200px'
    },

    _create: function () {
        var pierIndex = 0;
        var labelIndex = 0;
        var colorIndex = 0;

        var width = this.options.width;
        var height = width / 2;        
        function getPier(deg, label, sno) {            
            var cssSize = "width:" + height + "px;height:" + height + "px;";
            var halfSize = height * .5;
            var commonCss = "position:absolute;clip : rect(" +
           halfSize + "px," +
           height + "px," + height + "px,0px);";
            var html =
           $("<div style='-moz-transform: rotate(" +
           pierIndex + "deg);-webkit-transform: rotate(" +
           pierIndex + "deg);-ms-transform:rotate(" +
           pierIndex + "deg);" + cssSize + commonCss +
             "' ><span class='piedata' id='piedata" + sno + "' href='#' class='pier' style='cursor:pointer;-moz-transform:rotate(" +
           (deg - 180) + "deg);-webkit-transform:rotate(" +
           (deg - 180) + "deg);-ms-transform:rotate(" +
           (deg - 180) + "deg);" + cssSize + commonCss + "border-radius:" +
           height + "px;box-shadow : inset 0 0 8px gray;background:" +
           colors[(colorIndex++ % colors.length)] +
           "' title='" + label + " (" + Math.round(deg / 3.6) + "%)' ></span></div>");
            pierIndex += deg;
            return html;
        }

        this.element.css('width', width / 2 + 'px')
        .css('height', height + 'px')
        .toggleClass('ui-piechart-default');
        var total = 0;
        if (this.options.labels == null)
            this.options.labels = new Array();
        for (var i = 0; i < this.options.data.length; i++) {
            if (this.options.labels[i] == undefined)
                this.options.labels[i] = "";
            total += this.options.data[i];
            totalchartarea += this.options.data[i];
        }

        for (var i = 0; i < this.options.data.length; i++)
            this.element.append(getPier((360 / total) * this.options.data[i], this.options.labels[i], i));

        this._createLabels();
    },

    _createLabels: function () {
        var left = this.options.width * 0.6;
        var rows = "";
        for (var i = 0; i < this.options.data.length; i++) {
            rows += "<tr class='piedatalegend'  id='piedatalegend" + i + "' style='cursor:pointer' ><td style='background-color: " +
            colors[i % colors.length] + ";min-width: " + this.options.legendcolorwidth + ";min-height:" + this.options.legendcolorwidth + ";'></td><td>&nbsp;" +
                this.options.labels[i] +
            "</td></tr>";
        }

        this.element.append("<div class='ui-piechart-legend'  style='height:" + this.options.width / 2 + "px;overflow-y: auto;width:" + this.options.legendwidth + ";position:relative;left: " +
          left + "px;'><table style='border-spacing: 0px;background: white;padding: 4px;'>" +

          rows +

          "</table></div>");
    }
});

Check the labels from a to e they wont show tooltip. It's because the elements are overlapped and drawn. Even if I set z-index in any order the tool-tip is not showing.

Is there anyway I can overcome this mouseover issue?

Answer 1

The divs will always overlap each other, because their rotation points (transform-origin) are positioned to center. Try to modify it eg. top left:

http://jsfiddle.net/Stocki/DtC4B/

I hope this CSS + HTML 'demo' can help you. If you have any question please write a comment. :)

Edit:

The working version with JS: http://jsfiddle.net/Stocki/DtC4B/6/