Old school D3 from simpler times

All examples By author By category About

susielu

Full window Github gist

d3-annotation: Tooltip

Responsive Types and Hover Example

Made with d3.annotation. An example showing how you can dynamically change the annotation type and add hover events.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>

<style>
     body{
        background-color: whitesmoke;
     }

:root {
      --accent-color: #E8336D;
    }

svg {
        background-color: white;
        font-family: 'Lato';
     }

path.line {
        fill: none;
        stroke: lightgrey;
        stroke-width: 1px;
      }

.annotation path {
      stroke: var(--accent-color);
      fill: none;
    }

.annotation path.connector-arrow, 
    .title text, .annotation text,
    .annotation.callout.circle .annotation-subject path{
      fill: var(--accent-color);
    }
    .annotation-note-bg {
      fill: rgba(255, 255, 255, 0);
    }

.annotation-note-title {
      font-weight: bold;
    }

.annotation.xythreshold {
      cursor: move;
    }

.hidden {
      display: none;
    }

text.hover {
      font-size: .7em;
    }

text.title {
      font-size: 1.1em;
    }
    </style>
</head>
<body>
    <svg width=960 height=500>
      <text class="title" x=70 y=50>Hover over the dots to see more information</text>
      <text x=70 y=80>Uses d3.annotationCalloutCircle to make a tooltip</text>
    </svg>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>
​
    <style>
     body{
        background-color: whitesmoke;
     }
​
    :root {
      --accent-color: #E8336D;
    }
​
     svg {
        background-color: white;
        font-family: 'Lato';
     }
​
     path.line {
        fill: none;
        stroke: lightgrey;
        stroke-width: 1px;
      }
​
    .annotation path {
      stroke: var(--accent-color);
      fill: none;
    }
​
    .annotation path.connector-arrow, 
    .title text, .annotation text,
    .annotation.callout.circle .annotation-subject path{
      fill: var(--accent-color);
    }
    .annotation-note-bg {
      fill: rgba(255, 255, 255, 0);
    }
​
    .annotation-note-title {
      font-weight: bold;
    }
​
    .annotation.xythreshold {
      cursor: move;
    }
​
    .hidden {
      display: none;
    }
​
    text.hover {
      font-size: .7em;
    }
​
    text.title {
      font-size: 1.1em;
    }
    </style>
</head>
<body>
    <svg width=960 height=500>
      <text class="title" x=70 y=50>Hover over the dots to see more information</text>
      <text x=70 y=80>Uses d3.annotationCalloutCircle to make a tooltip</text>
    </svg>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.min.js"></script>
    <script src="index.js"></script>
</body>
</html>
​
    

Updated missing url https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js to https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.min.js

https://d3js.org/d3.v4.js

https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js