Using Bootstrap Tooltip with SVG Object - Not Displaying Despite Container Indication

Question

I am developing a histogram application for me, and I need this so that when the panel freezes, the details will be shown. I used Bootstrap for the rest of the site, so if I would use the tooltip feature here. However, I cannot get this to work. I tried changing the container to the body, but that doesn't make any difference. Please, someone can determine why my tips are not displayed. Any help was greatly appreciated.

<div id="chart" class="col-md-8">
    <svg id="svgContainer" ></svg>
</div>

<script>
$(document).ready(function(){
  $(".bar").tooltip({
  'container': 'body',
  'placement': 'left',
  'trigger': 'hover',
  'title': 'tooltips'
});
});

window.onload = function () {
var width = $('#chart').width(),
height = $('#chart').height(),
svgContainer = d3.select("#svgContainer");
svgContainerAttributes = svgContainer
    .attr("width", width)
    .attr("height", height)

d3.text(path, function(data) {
    var csvData = d3.csv.parseRows(data),
    barWidth = (width*0.95 / (csvData.length - 1)) * 0.75,
    barOffset = barWidth / 4;

    //extract axis titles and then remove from data
    var xTitle = csvData[0][0];
    var yTitle = csvData[0][1];
    csvData.splice(0,1);

    var min = findMin(csvData),
    max = findMax(csvData);

    var yScale = d3.scale.linear()
        .domain([0, max])
        .range([0,height])

    var barGroup = svgContainer.append("g").attr("transform", "translate("+width*0.05+",-"+height*0.05+")"); //shift bars up 5% to make room at bottom for bar titles

    var bars = barGroup.selectAll("rect")
        .data(csvData)
        .enter()
        .append("rect")

    var barsAttributes = bars
        .attr("width", barWidth)
        .attr("height", function (d,i) { return yScale(+csvData[i][1]); })
        .attr("x", function (d,i) { return i * (barWidth + barOffset)+ barOffset})
        .attr("y", function (d,i) { return height - yScale( +csvData[i][1] ) })
        .attr("fill", "#0033cc")
        .attr("class", "bar")
        .style("stroke", "black")
        .style("stroke-width", "2")
})

}
</script>

Answer 1

. :

var bars = barGroup.selectAll("rect")
        .data(csvData)
        .enter()
        .append("rect")
        .on("mouseover", function(){
            //run your tool tip code.
        });