https://github.com/cbertelegni/tooltip_d3js

Simple tooltip for d3.js
https://github.com/cbertelegni/tooltip_d3js

d3js d3v3 tooltip

Last synced: 19 days ago
JSON representation

Simple tooltip for d3.js

• Host: GitHub
• URL: https://github.com/cbertelegni/tooltip_d3js
• Owner: cbertelegni
• Created: 2015-06-17T12:07:30.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-04-06T20:49:44.000Z (almost 7 years ago)
• Last Synced: 2024-12-11T19:43:45.882Z (about 2 months ago)
• Topics: d3js, d3v3, tooltip
• Language: JavaScript
• Homepage: https://github.com/cbertelegni/tooltip_d3js
• Size: 46.9 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tooltipd3js

Tooltipd3 is a basic [d3.js](https://github.com/mbostock/d3) plugin for handling tooltips.

![print of tooltipd3.js](print_tooltipd3.png "")

## Example

### HTML

```html

svg { margin: 0 auto; display: block;}

.tooltipd3 {

	background:#FFFFFF;

	border: #ccc solid 1px;

	padding: 10px 12px 5px 10px;

	border-radius: 3px;

}



```


### JS

```javascript

var w = 500,

	h = 500;

/** instance tooltip */

var tooltip = tooltipd3();

var svg = d3.select('#canvas')

			.append('svg')

			.style('width', w)

			.style('height', h);

svg.append("circle")

	.attr('cx', function(){

		return w/2;

	})

	.attr('cy', function(){

		return h/2;

	})

	.attr('r', function(){ return w/4})

	// set mouse events

	.on('mouseover', function(){

		var html = "Hello tooltipD3!";

		tooltip.mouseover(html); // pass html content

	})

	.on('mousemove', tooltip.mousemove)

	.on('mouseout', tooltip.mouseout);

```

## Install

```bash

bower install -S tooltipd3

```

or

```bash

npm install cbertelegni/tooltipd3

```

Credits: [cbertelegni](https://github.com/cbertelegni)