CODEWITHSUNDEEP
jquerycssjquery-plugins
Monie corleone
Monie corleone

Reputation: 1618

Mouse hover not working on overlapped elements

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?

Upvotes: 3

Views: 243

Answers (3)

Stocki
Stocki

Reputation: 473

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/

Upvotes: 1

Graham Robertson
Graham Robertson

Reputation: 818

You have a really decent algorithm that calculates the area each element should occupy in the pie chart. I would append the mouse over event to the parent element of all the pie slices and and use the mouse position to figure out which slice I'm above. Just due to the overlap of element, the DOM is going to have a hard time deducing which element is the target of the mouseover event. Again, you have a really good algorithm for calculating these areas so I'm sure you could utilize that somehow to figure this out. Does that make sense? I hope so!

Upvotes: 0

Emad Rahnama
Emad Rahnama

Reputation: 1238

onmouseout='_resetHighlights()'

function _resetHighlights() is undifined!

onmouseover='_identifyobject(" + i + ");'

function _identifyobject() is undifined!

Upvotes: 0

Related Questions