Javascript: How to show tooltip by hovering mouse over axis lable

I am using parallel coordinates to visualize some data. I used most of the codes from the website below:

https://syntagmatic.github.io/parallel-coordinates/examples/table.html

Now, I want to add tooltip to the labels of the vertical lines. When a user hover mouse over a label the description of that label will appear in a box.

I want to add the description of each label manually by if else function, because I dont have the desciptions in a stored in a database. In a way that if someone hover over "cylinders" (it is the label of one axis) the description related to that appear in a box.

I used "mouseover" in the code below, but it is not working:

g.append("svg:g")
  .attr("class", "axis")
  .attr("transform", "translate(0,0)")
  .each(function(d) { d3.select(this).call(axis.scale(yscale[d])); })
.append("svg:text")
  .attr({
    "text-anchor": "middle",
    "y": -10,
    "transform": "translate(0,-5) rotate(" + __.dimensionTitleRotation + ")",
    "x": 0,
    "class": "label"
  })
  .text(function(d) {
    return d in __.dimensionTitles ? __.dimensionTitles[d] : d;  // dimension display names
  })
  .on("dblclick", flipAxisAndUpdatePCP)
  .on("mouseover", function(d){
             if d == "economy" {
                 return popover("some descition about economy");
             }else ifd == ""cylinder" {
                 return popover("some descition about cylinder");
             });

I know it has some problems but dont know how to fix it. Can anyone help me please?

you would need to add an html div for the tooltip and modify based on the location of the mouse. You can refer to the below block for more information: http://bl.ocks.org/wdickerson/64535aff478e8a9fd9d9facccfef8929