jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Timeline 'showTooltips' option (#3046) 

* Add 'showTooltips' timeline option

* Only show timeline popup if option showTooltips is true

* Add 'showTooltips' option to timeline docs

* Add tooltips disabled timeline example
gemini
Cameron Kloot 7 years ago
committed by yotamberk
parent
585d8b092e
commit
28fc990661
4 changed files with 30 additions and 4 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +7
    -0
      docs/timeline/index.html
  2. +16
    -1
      examples/timeline/items/tooltip.html
  3. +5
    -3
      lib/timeline/component/ItemSet.js
  4. +2
    -0
      lib/timeline/optionsTimeline.js

+ 7
- 0
docs/timeline/index.html View File

@ -1026,6 +1026,13 @@ function (option, path) {
visible.</td> visible.</td>
</tr> </tr>
<tr>
<td>showTooltips</td>
<td>boolean</td>
<td><code>true</code></td>
<td>If true, items with titles will display a tooltip. If false, item tooltips are prevented from showing.</td>
</tr>
<tr> <tr>
<td>stack</td> <td>stack</td>
<td>boolean</td> <td>boolean</td>

+ 16
- 1
examples/timeline/items/tooltip.html View File

@ -12,7 +12,7 @@
<script src="../../../dist/vis.js"></script> <script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>
@ -38,6 +38,12 @@
<div id="tooltips-cap"></div> <div id="tooltips-cap"></div>
<p>
Disable item tooltips.
</p>
<div id="tooltips-hide"></div>
<script type="text/javascript"> <script type="text/javascript">
// Create a DataSet (allows two way data-binding) // Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([ var items = new vis.DataSet([
@ -78,6 +84,15 @@
var timelineCap = new vis.Timeline(document.getElementById('tooltips-cap'), var timelineCap = new vis.Timeline(document.getElementById('tooltips-cap'),
items, cap_options); items, cap_options);
// Hide options
var hide_options = {
showTooltips: false
}
var timelineHide = new vis.Timeline(document.getElementById('tooltips-hide'),
items, hide_options);
</script> </script>
</body> </body>

+ 5
- 3
lib/timeline/component/ItemSet.js View File

@ -95,6 +95,8 @@ function ItemSet(body, options) {
axis: 20 axis: 20
}, },
showTooltips: true,
tooltip: { tooltip: {
followMouse: false, followMouse: false,
overflowMethod: 'flip' overflowMethod: 'flip'
@ -336,7 +338,7 @@ ItemSet.prototype.setOptions = function(options) {
var fields = [ var fields = [
'type', 'rtl', 'align', 'order', 'stack', 'stackSubgroups', 'selectable', 'multiselect', 'itemsAlwaysDraggable', 'type', 'rtl', 'align', 'order', 'stack', 'stackSubgroups', 'selectable', 'multiselect', 'itemsAlwaysDraggable',
'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'visibleFrameTemplate', 'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'visibleFrameTemplate',
'hide', 'snap', 'groupOrderSwap', 'tooltip', 'tooltipOnItemUpdateTime'
'hide', 'snap', 'groupOrderSwap', 'showTooltips', 'tooltip', 'tooltipOnItemUpdateTime'
]; ];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);
@ -1881,7 +1883,7 @@ ItemSet.prototype._onMouseOver = function (event) {
} }
var title = item.getTitle(); var title = item.getTitle();
if (title) {
if (this.options.showTooltips && title) {
if (this.popup == null) { if (this.popup == null) {
this.popup = new Popup(this.body.dom.root, this.popup = new Popup(this.body.dom.root,
this.options.tooltip.overflowMethod || 'flip'); this.options.tooltip.overflowMethod || 'flip');
@ -1931,7 +1933,7 @@ ItemSet.prototype._onMouseMove = function (event) {
var item = this.itemFromTarget(event); var item = this.itemFromTarget(event);
if (!item) return; if (!item) return;
if (this.options.tooltip.followMouse) {
if (this.options.showTooltips && this.options.tooltip.followMouse) {
if (this.popup) { if (this.popup) {
if (!this.popup.hidden) { if (!this.popup.hidden) {
var container = this.body.dom.centerContainer; var container = this.body.dom.centerContainer;

+ 2
- 0
lib/timeline/optionsTimeline.js View File

@ -137,6 +137,7 @@ let allOptions = {
template: {'function': 'function'}, template: {'function': 'function'},
groupTemplate: {'function': 'function'}, groupTemplate: {'function': 'function'},
visibleFrameTemplate: {string, 'function': 'function'}, visibleFrameTemplate: {string, 'function': 'function'},
showTooltips: { 'boolean': bool},
tooltip: { tooltip: {
followMouse: { 'boolean': bool }, followMouse: { 'boolean': bool },
overflowMethod: { 'string': ['cap', 'flip'] }, overflowMethod: { 'string': ['cap', 'flip'] },
@ -243,6 +244,7 @@ let configureOptions = {
// scale: ['millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'week', 'month', 'year'], // scale: ['millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'week', 'month', 'year'],
// step: [1, 1, 10, 1] // step: [1, 1, 10, 1]
//}, //},
showTooltips: true,
tooltip: { tooltip: {
followMouse: false, followMouse: false,
overflowMethod: 'flip' overflowMethod: 'flip'

Write Preview
Loading…
Cancel
Save