API Reference

#Tooltips

TnT comes with a basic tooltip library. This library is not restricted to TnT and can be used in many other scenarios, but it has not been developed as a general all-purpose, fully-featured tooltip library. See below for details. It is also possible to use TnT with other tooltip libraries too.

var myTooltip = function (data) {
    var obj = {};
    obj.header = "NAME";
    obj.rows = [];
    obj.rows.push ({
        "label" : "type",
        "value" : data.type
    });

    tnt.tooltip.table()
        .width(200)
        .call(this, obj);
    };

    d3.select("#container")
        .append("svg")
        .attr("height", 300)
        .attr("width", 300)
        .append("circle")
        .datum({name:"this is me", type:"this is my type"})
        .attr("cx", 150)
        .attr("cy", 150)
        .attr("r", 50)
        .attr("fill", "red")
        .on("click", myTooltip);

# tnt.tooltip ()

Creates a new tooltip instance that can be configured with the methods explained below. It returns a function that has to be called with this set to the DOM element the tooltip is attached to and the data to display in the tooltip. This generic tooltip object only knows how to position the tooltip in the page and creates the DOM elements appropriately, but it does not know about how to render or display the data. See below for specific tooltips that format the data in specific ways (like tables or lists)

var custom_tooltip = tnt.tooltip()
    .width(150)
    .fill (function (data) {
        // The DOM element is passed as "this"
        var container = d3.select(this);

        var table = container
            .append("table")
            .attr("class", "tnt_zmenu")
            .attr("border", "solid")
            .style("width", custom_tooltip.width() + "px");

        if (data.header) {
            table
                .append("tr")
                .attr("class", "tnt_zmenu_header")
                .append("th")
                .text(data.header);
        }

        if (data.body) {
            table
                .append("tr")
                .attr("class", "tnt_zmenu_row")
                .append("td")
                .style("text-align", "center")
                .html(data.body);
        }
    });

# tooltip.position (<string>)

Sets the relative position of the tooltip with respect to the mouse. Possible values are "left" and "right" (by default). If call without arguments returns the current positioning value.

var tooltip = tnt.tooltip.table()
    .position ("left");

# tooltip.allow_drag (<boolean>)

Sets if the tooltip is draggable or not. By default, this option is set to true. If no argument is provided returns the current value.

var tooltip = tnt.tooltip.table()
    .allow_drag (false);

# tooltip.show_closer (<boolean>)

Sets if the tooltip can be closed manually. If set to false the tooltip can not be closed directly by the user (clicking on the cross), but only programmatically calling the close method. By default this option is set to true. If called without arguments, the current value is returned.

var tooltip = tnt.tooltip.table()
    .show_closer (false);

# tooltip.width (<integer>)

Sets the minimum width of the tooltip. This width is not enforced if elements inside of the tooltip (like images) have greater width. The numeric argument determines the width in pixels. If called without arguments returns the current value.

var tooltip = tnt.tooltip.table()
    .width (200) // 200 pixels

# tooltip.id (<integer | string>)

Sets an id for the tooltip. This controls the number of tooltips that can be displayed simultaneously in the same page. Everytime a tooltip is created, any previous tooltips with the same id are removed. For example, if the id is always set to the same value, everytime a tooltip is created any previous tooltip is destroyed. If called without arguments the current id of the tooltip is returned.

var myTooltip = function (data) {
    var obj = {};
    obj.header = "Circle";
    obj.rows = [];
    obj.rows.push ({
        "label" : "type",
        "value" : data.type
    });

    tnt.tooltip.table()
        .width (200)
        .id (data.type)
        .call (this, obj);
};

# tooltip.container (<DOM_element>)

Species the DOM element to anchor the tooltip. By default the tooltip is anchored in the first div element found up the DOM hierarchy is used, by using this method it is possible to define an alternative DOM element. Remember that the anchor element has to be "relative" positioned

tnt.tooltip.table()
  .width (200)
  .id(data.type)
  .container(document.getElementById("mycontainer")); // <div id=mycontainer style="position:relative"></div>
  .call(...);

# tooltip.fill (<callback>)

This method specifies the how to render the tooltip content. The callback is run passing the container element as this and the data obj as its argument. See tnt.tooltip.table or tnt.tooltip.plain for examples of use of this method. If called without arguments, the current callback is returned

var custom_tooltip = tnt.tooltip()
    .width(150)
    .fill (function (data) {
        // The DOM element is passed as "this"
        var container = d3.select(this);

        var table = container
            .append("table")
            .attr("class", "tnt_zmenu")
            .attr("border", "solid")
            .style("width", custom_tooltip.width() + "px");

        if (data.header) {
            table
                .append("tr")
                .attr("class", "tnt_zmenu_header")
                .append("th")
                .text(data.header);
        }

        if (data.body) {
            table
                .append("tr")
                .attr("class", "tnt_zmenu_row")
                .append("td")
                .style("text-align", "center")
                .html(data.body);
        }
    });


d3.select("#container")
    .append("svg")
    .attr("width", 300)
    .attr("height", 300)
    .append("circle")
    .datum({
        header:"this is the header",
        body:"this is the body"
    })
    .attr("cx", 150)
    .attr("cy", 150)
    .attr("r", 50)
    .attr("fill", "red")
    .on("click", function (d) {
        custom_tooltip.call(this, d);
    });

# tnt.tooltip.plain ()

Tooltips for non-structured data. Returns a tooltip that accepts a data object consisting of two fields, header and body. The former typically contains a string that will be used as the header of the tooltip. The latter will be rendered as the body of the tooltip and centered. The body can contain any valid html. The returned tooltip also has all the methods previously described for general tooltips.

tnt.tooltip.plain()
    .id(data.name)
    .width(150)
    .call(element, {
        header: "Help"
        body: "<img src=myImg.png width=30/>"
    });

# tnt.tooltip.table ()

Tooltip rendered as a table. Returns a tooltip that accepts a data object that is expected to have two fields, header that typically contains a string that is display at the top of the tooltip and rows that contains an array of objects each containing a label and value field. These object data is displayed in the tooltip in a form of a 2-columns table. If a row object has an empty value the corresponding label will span the two columns of the row. The returned tooltip also has all the methods previously described for general tooltips.

var myTooltip = function (data) {
    var obj = {};
    obj.header = "Circle";
    obj.rows = [];
    obj.rows.push ({
        "label" : "type",
        "value" : data.type
    });

    tnt.tooltip.table()
        .width (200)
        .id (data.type)
        .call (this, obj);
};