D3 Examples - 26.HTML div styling for tooltip

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: An HTML div tooltip</title>
        <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
        <style type="text/css">
​
            rect:hover {
                fill: orange;
            }
            
/* ---------  change values to test each style    */
      
            #tooltip {
                position: absolute;
                width: 200px;
                height: auto;
                padding: 10px;
                background-color: white;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                box-shadow: 4px 4px 10px rgba(0, 100, 100, 0.4);
                pointer-events: none;
            }
            
            #tooltip.hidden {
                display: none;
            }
            
            #tooltip p {
                margin: 0;
                font-family: sans-serif;
                font-size: 16px;
                line-height: 20px;
            }
​
        </style>
    </head>
    <body>
    
        <div id="tooltip" class="hidden">
      
            <p><strong>Important Label Heading</strong></p>
      
            <p><span id="value">100</span>%</p>
      
        </div>
    
        <script type="text/javascript">
​
            //Width and height
            var w = 600;
            var h = 250;
            
            var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                            11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
​
            var xScale = d3.scaleBand()
                            .domain(d3.range(dataset.length))
                            .rangeRound([0, w])
                    .padding(0.05);
​
            var yScale = d3.scaleLinear()
                            .domain([0, d3.max(dataset)])
                            .range([h, 0]);
            
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
​
            svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x", function(d, i) {
                    return xScale(i);
               })
               .attr("y", function(d) {
                    return yScale(d);
               })
               .attr("width", xScale.bandwidth())
               .attr("height", function(d) {
                    return h - yScale(d);
               })
               .attr("fill", function(d) {
                    return "rgb(255, 255, " + (d * 10) + ")";
               })
      
      
               .on("mouseover", function(d) {
​
                    //Get this bar's x/y values, then augment for the tooltip
                    var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2;
                    var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + h / 2;
​
​
                    d3.select("#tooltip")
//       px distance from left edge of svg
                        .style("left", xPosition + "px")
//       px distance from top edge of svg          
                        .style("top", yPosition + "px") 
//           update value for label box          
                        .select("#value")
                        .text(d);
               
                    //Show the tooltip
                    d3.select("#tooltip").classed("hidden", false);
​
               })
               .on("mouseout", function() {
               
                    //Hide the tooltip
                    d3.select("#tooltip").classed("hidden", true);
                    
               })
               .on("click", function() {
                    sortBars();
               });
​
            //Define sort order flag
            var sortOrder = false;
            
            //Define sort function
            var sortBars = function() {
​
                //Flip value of sortOrder
                sortOrder = !sortOrder;
​
                svg.selectAll("rect")
                   .sort(function(a, b) {
                        if (sortOrder) {
                            return d3.ascending(a, b);
                        } else {
                            return d3.descending(a, b);
                        }
                    })
                   .transition()
                   .delay(function(d, i) {
                       return i * 50;
                   })
                   .duration(1000)
                   .attr("x", function(d, i) {
                        return xScale(i);
                   });
​
            };          
            
        </script>
    </body>
</html>
    