Q: Argument passed D3-Tip callback is full data array I am working with Techan JS, with d3 tip plugin.
Callback function of D3-Tip is passed the whole data array instead of object in context. I am probably hooking it on the wrong place.
    /* Initialize tooltip */
    var tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
        console.log(d);
        return d;
    });

    var margin = {top: 20, right: 20, bottom: 30, left: 50},
            width = 960 - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%d-%b-%y").parse,
            timeFormat = d3.time.format('%Y-%m-%d'),
            valueFormat = d3.format(',.2fs');

    var x = techan.scale.financetime()
            .range([0, width]);

    var y = d3.scale.linear()
            .range([height, 0]);

    var candlestick = techan.plot.candlestick()
            .xScale(x)
            .yScale(y);

    var trendline = techan.plot.trendline()
            .xScale(x)
            .yScale(y)
            .on("mouseenter", enter)
            .on("mouseout", out)
            .on("drag", drag);

    var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

    var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

    var svg = d3.select("#candle-stick").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var valueText = svg.append('text')
            .style("text-anchor", "end")
            .attr("class", "coords")
            .attr("x", width - 5)
            .attr("y", 15);


    var data = [
        { date: "9-Jun-14", open: 62.40, high: 63.34, low: 61.79, close: 62.88, volume: 37617413 },
        { date: "6-Jun-14",open: 63.37, high: 63.48, low: 62.15, close: 62.50,volume: 42442096 },
        { date: "5-Jun-14",open: 63.66, high: 64.36, low: 62.82, close: 63.19,volume: 47352368 },
        { date: "4-Jun-14",open: 62.45, high: 63.59, low: 62.07, close: 63.34,volume: 36513991 },
        { date: "3-Jun-14",open: 62.62, high: 63.42, low: 62.32, close: 62.87,volume: 32216707 },
        { date: "2-Jun-14",open: 63.23, high: 63.59, low: 62.05, close: 63.08,volume: 35995537 },
        { date: "30-May-14",open: 63.95, high: 64.17, low: 62.56, close: 63.30,volume: 45283577 }
    ];


    var accessor = candlestick.accessor();
    data = data.slice(0,200).map(function(d) {
        return {
            date: parseDate(d.date),
            open: +d.open,
            high: +d.high,
            low: +d.low,
            close: +d.close,
            volume: +d.volume
        };
    }).sort(function(a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });
    x.domain(data.map(accessor.d));
    y.domain(techan.scale.plot.ohlc(data, accessor).domain());

    svg.append("g")
            .datum(data)
            .attr("class", "candlestick")
            .call(candlestick)
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide);

    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Price ($)");

    /* Invoke the tip in the context of your visualization */
    svg.call(tip)

    // functions

    function enter(d) {
        valueText.style("display", "inline");
        refreshText(d);
    }

    function out(d) {
        valueText.style("display", "none");
    }

You can see the code live at http://jsfiddle.net/sisir/ghox8ewa/1/
(look at the console when hovering on a candlestick)

A:  /* Initialize tooltip */
var tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
console.log(d);
return d;
}); 

In the above tooltip you are returning d for html, change it to 
 /* Initialize tooltip */
var tip = d3.tip().attr('class', 'd3-tip').html(function(d, i) {
return d[i].open;//your required text here
}); 

Hope this is what you are looking for....
If not ask for more.
The problem in the above chart is the approach we are following,
we are drawing candlestick and binding tooltip to this candlestick by writing below code
svg.append("g")
            .datum(data)
            .attr("class", "candlestick")
            .call(candlestick)
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide);

from the above code that will return a 'g' of class 'candlestick'
(to view that write this code
var candle=    svg.append("g")
                .datum(data)
                .attr("class", "candlestick")
                .call(candlestick)
console.log(candle);

) and we are binding tooltip to that so it is returning data(whole data object) as argument to our tooltip, 
To fulfill our requirement,
I've implemented and developed required code in the below fiddle
http://jsfiddle.net/ghox8ewa/5/
Kindly follow the link and try to analyze....
If you still have doubts ask me for more.
