https://github.com/bumbeishvili/d3-tooltip

Simple, beautiful data driven tooltip
https://github.com/bumbeishvili/d3-tooltip

Last synced: about 2 months ago
JSON representation

Simple, beautiful data driven tooltip

• Host: GitHub
• URL: https://github.com/bumbeishvili/d3-tooltip
• Owner: bumbeishvili
• Created: 2017-11-06T09:15:01.000Z (almost 7 years ago)
• Default Branch: gh-pages
• Last Pushed: 2022-03-13T09:28:38.000Z (over 2 years ago)
• Last Synced: 2024-05-05T05:33:05.161Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 254 KB
• Stars: 12
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-d3 - d3-tooltip - Arrow shaped tooltip with shadows and dynamic content (Utils)
• awesome-d3 - d3-tooltip - Arrow shaped tooltip with shadows and dynamic content (Utils)
• awesome-d3 - d3-tooltip - Arrow shaped tooltip with shadows and dynamic content (Utils)

README

        
[![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)

# D3 tooltip

## See the [Project Page](https://bumbeishvili.github.io/d3-tooltip/) for interactive example!

## See usage example [at this codepen](https://codepen.io/bumbeishvili/pen/WMvNxM?editors=1010)

## screenshot

![image](assets/scr.png)

### Highlights

* Dynamic resizing

* High number of customization options

### Usage

1. Include `tooltip.js` file into you app

```html

 

```

2. Initialize tooltip inside your d3 visual

```javascript

 var tooltip = d3.componentsTooltip()

        .container('.svg-element')

        .content([

          {

            left: "default id",

            right: "{id}"

          },

          {

            left: "default value",

            right: "{value}"

          },

        ])

```

3. Show or hide it on your events

```javascript

   // show tooltip

        tooltip

        .x(100)

        .y(100)

        .show({id:1,value:"some value",name:"some large name"})

```

```javascript

//hide

tooltip.hide()

```

## Author

 [David   B (twitter)](https://twitter.com/dbumbeishvili)  

 [David   B (linkedin)](https://www.linkedin.com/in/bumbeishvili/)  

I am available for freelance data visualization work. Please [contact me](https://davidb.dev/about) in case you'd like me to help you with my experience and expertise

You can also [book data viz related consultation session](https://www.fiverr.com/share/4XxG21) with me