Move tooltip along with cursor on mouseover - jquery-tooltip

Question

I would like to get the tooltip moved along with cursor when cursor is on bars('rect') of d3js barcharts. Iam placing tooltip on top of corresponding bars in barchart with correct data loaded from .json objects given in code.I tried, but i didn't get proper solution for how to get cursor coordinates and passing cursor coordinates to d3 tooltip offset().
Can any one generate proper code in javascript that works with my application.
Thanks in advance.
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script type="text/javascript">
var XPos=0;
var YPos=0;
var inputData = [ {
x : "i20",
y : 1
}, {
x : "Tucson",
y : 37
}, {
x : "iLoad",
y : 16
}, {
x : "iMax",
y : 18
}, {
x : "Elantra",
y : 8
}, {
x : "Veloster",
y : 1
}, {
x : "i30",
y : 86
}, {
x : "iX35",
y : 7
}, {
x : "Accent",
y : 27
} ];
var svgHeight = 400;
var svgWidth = 400;
var maxY = 100; // You can also compute this from the data (y axis)
var barSpacing = 10; // The amount of space you want to keep between the bars
var padding = {
left : 50,
right : 0,
top : 20,
bottom : 20
};
function render(inputData)
{
var svgHeight = 250;
var svgWidth = 700;
var maxY = 100; // You can also compute this from the data (y axis)
var barSpacing = 10; // The amount of space you want to keep between the bars
var padding = {
left: 50,
right: 0,
top: 20,
bottom: 20
};
var maxWidth = svgWidth - padding.left - padding.right;
var maxHeight = svgHeight - padding.top - padding.bottom;
//var x = d3.scale.ordinal().domain(inputData.map(function (d) {
// return d.x;
//})).rangeRoundBands([0, maxWidth]);
var x = d3.scale.ordinal().domain(inputData.map(function (d) {
return d.x;
})).rangeRoundBands([0, maxWidth], .3);
var y = d3.scale.linear().domain([0,
d3.max(inputData, function (d) {
return d.y;
})
]).range([maxHeight, 0]);
var xAxis = d3.svg.axis().scale(x).orient('bottom');
var yAxis = d3.svg.axis().scale(y).orient('left');
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([YPos, XPos])
.html(function(d)
{
return "<strong>total:</strong> <span style='color:orange'>" +
d.y + "</span>";
})
var svg = d3.select('.chart').attr({
width: svgWidth,
height: svgHeight
});
var chart = svg.append('g').attr(
{
transform: function (d, i) {
return 'translate(' + padding.left + ','
+ padding.top + ')';
}
});
chart.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + maxHeight + ')')
.call(xAxis)
.append("text")
.attr("x", maxWidth)
//.attr("y", 20)
.attr("dy", ".81em")
.style("text-anchor", "end")
.text("Model");
chart.append('g')
.attr('class', 'y axis')
.attr('height', maxHeight)
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Total");
var bars = chart.selectAll('g.bar-group')
.data(inputData)
.enter()
.append('g') // Container for the each bar
.attr({
transform: function (d, i) {
return 'translate(' + x(d.x) + ', 0)';
},
class: 'bar-group'
})
;
bars.call(tip);
bars.append('rect')
.attr('y', maxHeight)
.attr('height', 0)
.attr('width', function (d) { return x.rangeBand(d) - 1; })
.attr('class', 'bar')
.transition().duration(1500)
.attr('y', function (d, i) { return y(d.y); })
.attr('height', function (d, i) { return maxHeight - y(d.y); });
bars.select('rect')
.on('mouseover', tip.show)
.on('mousemove', function(event)
{
XPos = event.clientX;
YPos = event.clientY;tip.show;
})
.on('mouseout', tip.hide);
}
render(inputData);
</script>
<style type="text/css">
.chart rect {
fill: steelblue;
}
.chart rect:hover {
fill: blue;
opacity: 0.1;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font-size: 12px;
}
.chart .current {
fill: green;
cursor: pointer;
}
.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;
}
<body>
<div class="chart-container">
<svg class="chart">
</svg>
</div>

Answer 1

<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script type="text/javascript">
var XPos=0;
var YPos=0;
var inputData = [ {
x : "i20",
y : 1
}, {
x : "Tucson",
y : 37
}, {
x : "iLoad",
y : 16
}, {
x : "iMax",
y : 18
}, {
x : "Elantra",
y : 8
}, {
x : "Veloster",
y : 1
}, {
x : "i30",
y : 86
}, {
x : "iX35",
y : 7
}, {
x : "Accent",
y : 27
} ];
var svgHeight = 400;
var svgWidth = 400;
var maxY = 100; // You can also compute this from the data (y axis)
var barSpacing = 10; // The amount of space you want to keep between the bars
var padding = {
left : 50,
right : 0,
top : 20,
bottom : 20
};
function render(inputData)
{
var svgHeight = 250;
var svgWidth = 700;
var maxY = 100; // You can also compute this from the data (y axis)
var barSpacing = 10; // The amount of space you want to keep between the bars
var padding = {
left: 50,
right: 0,
top: 20,
bottom: 20
};
var maxWidth = svgWidth - padding.left - padding.right;
var maxHeight = svgHeight - padding.top - padding.bottom;
//var x = d3.scale.ordinal().domain(inputData.map(function (d) {
// return d.x;
//})).rangeRoundBands([0, maxWidth]);
var x = d3.scale.ordinal().domain(inputData.map(function (d) {
return d.x;
})).rangeRoundBands([0, maxWidth], .3);
var y = d3.scale.linear().domain([0,
d3.max(inputData, function (d) {
return d.y;
})
]).range([maxHeight, 0]);
var xAxis = d3.svg.axis().scale(x).orient('bottom');
var yAxis = d3.svg.axis().scale(y).orient('left');
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([YPos, XPos])
.html(function(d)
{
return "<strong>total:</strong> <span style='color:orange'>" +
d.y + "</span>";
})
var svg = d3.select('.chart').attr({
width: svgWidth,
height: svgHeight
});
var chart = svg.append('g').attr(
{
transform: function (d, i) {
return 'translate(' + padding.left + ','
+ padding.top + ')';
}
});
chart.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + maxHeight + ')')
.call(xAxis)
.append("text")
.attr("x", maxWidth)
//.attr("y", 20)
.attr("dy", ".81em")
.style("text-anchor", "end")
.text("Model");
chart.append('g')
.attr('class', 'y axis')
.attr('height', maxHeight)
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Total");
var bars = chart.selectAll('g.bar-group')
.data(inputData)
.enter()
.append('g') // Container for the each bar
.attr({
transform: function (d, i) {
return 'translate(' + x(d.x) + ', 0)';
},
class: 'bar-group'
})
;
bars.call(tip);
bars.append('rect')
.attr('y', maxHeight)
.attr('height', 0)
.attr('width', function (d) { return x.rangeBand(d) - 1; })
.at`enter code here`tr('class', 'bar')
.transition().duration(1500)
.attr('y', function (d, i) { return y(d.y); })
.attr('height', function (d, i) { return maxHeight - y(d.y); });
//****************ANSWER IS HERE***********************`enter code here`
bars.select('rect')
.on('mousemove', function(event)
{
tip.style("top", (d3.event.pageY - 51) + "px")
.style("left", (d3.event.pageX - 51) + "px")
}
)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
//*******************UP TO Here********************
}
render(inputData);
</script>
<style type="text/css">
.chart rect {
fill: steelblue;
}
.chart rect:hover {
fill: blue;
opacity: 0.1;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font-size: 12px;
}
.chart .current {
fill: green;
cursor: pointer;
}
.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;
}
<body>
<div class="chart-container">
<svg class="chart">
</svg>
</div>