title: Why is my d3.tip not working?
body: <p>Before adding the d3.tip method into the codes, the bar chart will appear. However, after adding in the d3.tip method, nothing is displayed and this error is shown in the console. How do I solve this problem and add in the d3.tip into my bar chart? Uncaught TypeError: Object # has no method 'tip' </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  
  body {
    font: 10px sans-serif;
  }
  
  .y.axisRight text {
      fill: orange;
  }
  
  .y.axisLeft text {
      fill: steelblue;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .bar1 {
    fill: steelblue;
  }
  
  .bar2 {
    fill: orange;
  }
  
  .x.axis path {
    display: black;
  
  }
  .d3-tip {
    line-height: 1;
    font-weight: bold;
    padding: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 2px;
  }
  
  /* Creates a small triangle extender for the tooltip */
  .d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    content: "\25BC";
    position: absolute;
    text-align: center;
  }
  
  /* Style northward tooltips differently */
  .d3-tip.n:after {
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
  }
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var margin = {top: 80, right: 80, bottom: 80, left: 80},
      width = 400 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;
  
  var x = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);
  
  var y0 = d3.scale.linear().domain([100,500]).range([height, 0]),
  y1 = d3.scale.linear().domain([500,1000]).range([height, 0]);
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");
  
  
  // create left yAxis
  var yAxisLeft = d3.svg.axis().scale(y0).ticks(5).orient("left");
  // create right yAxis
  var yAxisRight = d3.svg.axis().scale(y1).orient("right");
  
  var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {
      return "&lt;strong&gt;Health Workers:&lt;/strong&gt; &lt;span style='color:red'&gt;" + d.totalhealthworkers + "&lt;/span&gt;";
    })
  
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("class", "graph")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  
  svg.call(tip);
  
  d3.json("workforce.json", function(error, data) {
    x.domain(data.map(function(d) { return d.countryName; }));
    y0.domain([0, d3.max(data, function (d) { return d.totalhealthworkers; })]);
    y1.domain([0, d3.max(data, function (d) { return d.totalhealthfacilities; })]);
  
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
  
    svg.append("g")
        .attr("class", "y axis axisLeft")
        .attr("transform", "translate(0,0)")
        .call(yAxisLeft)
      .append("text")
        .attr("y", 35)
        .attr("dy", "-2em")
         .attr("transform", "rotate(-90)")
        .style("text-anchor", "end")
        .text("Total health workers per 100,000 people");
  
    svg.append("g")
        .attr("class", "y axis axisRight")
        .attr("transform", "translate(" + (width) + ",0)")
        .call(yAxisRight)
      .append("text")
        .attr("y", 15)
         .attr("x", -20)
         .attr("transform", "rotate(-90)")
        .attr("dy", "-2em")
        .attr("dx", "2em")
        .style("text-anchor", "end")
        .text("Total health facilities per 100,000 people");
  
    bars = svg.selectAll(".bar").data(data).enter();
  
    bars.append("rect")
        .attr("class", "bar1")
        .attr("x", function (d) { return x(d.countryName); })
        .attr("width", x.rangeBand() / 3)
        .attr("y", function (d) { return y0(d.totalhealthworkers); })
        .attr("height", function (d, i, j) { return height - y0(d.totalhealthworkers); })
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide)
  
    bars.append("rect")
        .attr("class", "bar2")
        .attr("x", function(d) { return x(d.countryName) + x.rangeBand()/2; })
        .attr("width", x.rangeBand() / 3)
        .attr("y", function(d) { return y1(d.totalhealthfacilities); })
        .attr("height", function (d, i, j) { return height - y1(d.totalhealthfacilities); })
  });
  
  function type(d) {
      d.totalhealthworkers = +d.totalhealthworkers;
      d.totalhealthfacilities = +d.totalhealthfacilities;
    return d;
  }
  
  &lt;/script&gt;
    &lt;/body&gt;&lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the JSON file that I am using.</p>
  
  <pre><code>[{"countryName":"Afghanistan","totalhealthworkers":"113.9","totalhealthfacilities":"4.50239"}]
  </code></pre>