fix tooltip display

Author: nicgirault

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.0.3 - 2017-04-05
+
+- Fix tooltip position when we can scroll on the page
+
 ### 2.0.2 - 2017-03-16
 
 - Add CTRL+C shortcut to copy tooltip content.

dist/circos.js

@@ -0,0 +1 @@
+module.exports = require('./src/layout/conf')

dist/circos.min.js

@@ -1,6 +1,6 @@
 {
   "name": "circos",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A d3js library to build circos graphs",
   "main": "dist/circos.min.js",
   "scripts": {

layout-conf.js

@@ -1,9 +1,10 @@
-div.tooltip {
+div.circos-tooltip {
   position: absolute;
   text-align: center;
   padding: 5px 10px;
   background: #111111;
   color: white;
   border: 0px;
   pointer-events: none;
+  z-index: 1000;
 }

package.json

@@ -1,8 +1,9 @@
 import defaultsDeep from 'lodash/defaultsDeep'
 import forEach from 'lodash/forEach'
 import isArray from 'lodash/isArray'
+import map from 'lodash/map'
 import {select} from 'd3-selection'
-import Layout from './layout'
+import Layout from './layout/index'
 import render from './render'
 import Text from './tracks/Text'
 import Highlight from './tracks/Highlight'
@@ -26,10 +27,17 @@ class Core {
     this.tracks = {}
     this._layout = null
     this.conf = defaultsDeep(conf, defaultConf)
-    this.svg = select(this.conf.container).append('svg')
-    this.tip = select(this.conf.container).append('div')
-      .attr('class', 'tooltip')
+    const container = select(this.conf.container).append('div')
+      .style('position', 'relative')
+    this.svg = container.append('svg')
+    if (select('body').select('.circos-tooltip').empty()) {
+      this.tip = select('body').append('div')
+      .attr('class', 'circos-tooltip')
       .style('opacity', 0)
+    } else {
+      this.tip = select('body').select('.circos-tooltip')
+    }
+
     this.clipboard = initClipboard(this.conf.container)
   }
 
@@ -44,7 +52,7 @@ class Core {
       delete this.tracks[trackIds]
     } else if (isArray(trackIds)) {
       forEach(trackIds, function (trackId) {
-        svg.select('.' + trackId).remove()
+        this.svg.select('.' + trackId).remove()
         delete this.tracks[trackId]
       })
     } else {

src/behaviors/tooltip.css

@@ -0,0 +1,35 @@
+export default {
+  innerRadius: 250,
+  outerRadius: 300,
+  cornerRadius: 0,
+  gap: 0.04, // in radian
+  opacity: 1,
+  labels: {
+    position: 'center',
+    display: true,
+    size: 14,
+    color: '#000',
+    radialOffset: 20
+  },
+  ticks: {
+    display: true,
+    color: 'grey',
+    spacing: 10000000,
+    labels: true,
+    labelSpacing: 10,
+    labelSuffix: '',
+    labelDenominator: 1,
+    labelDisplay0: true,
+    labelSize: 10,
+    labelColor: '#000',
+    labelFont: 'default',
+    majorSpacing: 5,
+    size: {
+      minor: 2,
+      major: 5
+    }
+  },
+  onClick: null,
+  onMouseOver: null,
+  zIndex: 100
+}

src/circos.js

@@ -2,43 +2,9 @@ import cloneDeep from 'lodash/cloneDeep'
 import defaultsDeep from 'lodash/defaultsDeep'
 import reduce from 'lodash/reduce'
 import forEach from 'lodash/forEach'
+import defaultConf from './conf'
 
 const logger = console
-const defaultConf = {
-  innerRadius: 250,
-  outerRadius: 300,
-  cornerRadius: 0,
-  gap: 0.04, // in radian
-  opacity: 1,
-  labels: {
-    position: 'center',
-    display: true,
-    size: 14,
-    color: '#000',
-    radialOffset: 20
-  },
-  ticks: {
-    display: true,
-    color: 'grey',
-    spacing: 10000000,
-    labels: true,
-    labelSpacing: 10,
-    labelSuffix: '',
-    labelDenominator: 1,
-    labelDisplay0: true,
-    labelSize: 10,
-    labelColor: '#000',
-    labelFont: 'default',
-    majorSpacing: 5,
-    size: {
-      minor: 2,
-      major: 5
-    }
-  },
-  onClick: null,
-  onMouseOver: null,
-  zIndex: 100
-}
 
 export default class Layout {
   constructor (conf, data) {

src/layout/conf.js

@@ -1,6 +1,6 @@
 import forEach from 'lodash/forEach'
 import sortBy from 'lodash/sortBy'
-import renderLayout from './render-layout'
+import renderLayout from './layout/render'
 
 export default function render (ids = [], removeTracks, circos) {
   const renderAll = ids.length === 0