TnT Tooltip

Tooltip library for TnT

#Introduction

TnT Tooltip is a basic tooltip library for TnT although it is not restricted to TnT and can be used on its own. Although it is very flexible and light, this library has not been developed as a general fully-featured tooltip library that matches all possible scenarios. The main characteristics of TnT Tooltip are:

Pros

Easy integration with other TnT libraries
Easy integration with SVG based visualisations and d3js
Light and flexible with powerful API

Cons

Requires an anchor DOM element css-relative-positioned
Some of the examples require the developer some coding. See the examples page

#Example

<div id="container" style="position:relative" ></div>

var t = function (data) {
     var obj = {};
     obj.header = data.name;
     obj.rows = [];
     obj.rows.push({
         "label" : "type",
         "value" : data.type
     });
     tooltip.table()
         .width(180)
         .call (this, obj);
 };

 d3.select("#container") // div element
     .append("svg")
     .attr("width", 300)
     .attr("height", 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", t);

The above example creates a new div element as the visualisation container. This anchor DOM element needs to be relative-positioned. The example then appends a SVG to this div element and a circle with some data using d3js. When this circle is clicked, a new tooltip is created and its data displayed in the tooltip.

#Installation

TnT Tooltip can be used linking to the library directly. It depends on d3.js and this library needs to be linked before TnT Tooltip.

<!-- D3 -->
<script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>

<!-- TnT Tooltip-->
<link rel="stylesheet" href="http://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.css" type="text/css" />
<script src="http://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js" charset="utf-8"></script>

It is also possible to install the source code and build the library locally:

Using npm:
```
npm install tnt.tooltip
        
```

Building from Git:

git clone https://github.com/tntvis/tnt.tooltip
cd tnt.tooltip
npm install
npm build-browser

#Browser support

TnT works on HTML5, CSS3 and SVG-compliant browsers, which generally means any "modern browser". The TnT library and the other TnT-related libraries are tested regularly against Chrome (Chromium) and major changes are regularly tested in recent versions of Firefox, Safari (Webkit) and Opera. It has been also tested in IE versions 9+. If you find any problem, please let me know.

The TnT Tooltip library depends only on the D3.js library. Check its browser's compatibility note for more information.

#Feedback

Please, send any feedback to emepyc@gmail.com. Bug reports and feature requests are also welcome here