Skip to content

bumbeishvili/d3-tooltip

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SWUbanner

D3 tooltip

See the Project Page for interactive example!

See usage example at this codepen

screenshot

image

Highlights

  • Dynamic resizing
  • High number of customization options

Usage

  1. Include tooltip.js file into you app
 <script src="tooltip.js"></script>
  1. Initialize tooltip inside your d3 visual
 var tooltip = d3.componentsTooltip()
        .container('.svg-element')
        .content([
          {
            left: "default id",
            right: "{id}"
          },
          {
            left: "default value",
            right: "{value}"
          },
        ])
  1. Show or hide it on your events
   // show tooltip
        tooltip
        .x(100)
        .y(100)
        .show({id:1,value:"some value",name:"some large name"})
//hide
tooltip.hide()

Author

David B (twitter)
David B (linkedin)

I am available for freelance data visualization work. Please contact me in case you'd like me to help you with my experience and expertise

You can also book data viz related consultation session with me

About

Simple, beautiful data driven tooltip

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published