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
7 years ago · 28fc990661
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@ -1026,6 +1026,13 @@ function (option, path) {
        visible.</td>
    </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>
      <td>stack</td>
      <td>boolean</td>
--- a/examples/timeline/items/tooltip.html
+++ b/examples/timeline/items/tooltip.html
@ -12,7 +12,7 @@

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  

 </head>
 <body>

@ -38,6 +38,12 @@

 <div id="tooltips-cap"></div>

 <p>
  Disable item tooltips.
 </p>

 <div id="tooltips-hide"></div>

 <script type="text/javascript">
  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
@ -78,6 +84,15 @@

  var timelineCap = new vis.Timeline(document.getElementById('tooltips-cap'),
      items, cap_options);

  // Hide options
  var hide_options = {
    showTooltips: false
  }

  var timelineHide = new vis.Timeline(document.getElementById('tooltips-hide'),
      items, hide_options);

 </script>

 </body>
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@ -95,6 +95,8 @@ function ItemSet(body, options) {
      axis: 20
    },

    showTooltips: true,

    tooltip: {
      followMouse: false,
      overflowMethod: 'flip'
@ -336,7 +338,7 @@ ItemSet.prototype.setOptions = function(options) {
    var fields = [
      'type', 'rtl', 'align', 'order', 'stack', 'stackSubgroups', 'selectable', 'multiselect', 'itemsAlwaysDraggable', 
      'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'visibleFrameTemplate',
      'hide', 'snap', 'groupOrderSwap', 'tooltip', 'tooltipOnItemUpdateTime'
      'hide', 'snap', 'groupOrderSwap', 'showTooltips', 'tooltip', 'tooltipOnItemUpdateTime'
    ];
    util.selectiveExtend(fields, this.options, options);

@ -1881,7 +1883,7 @@ ItemSet.prototype._onMouseOver = function (event) {
  }

  var title = item.getTitle();
  if (title) {
  if (this.options.showTooltips && title) {
    if (this.popup == null) {
      this.popup = new Popup(this.body.dom.root,
          this.options.tooltip.overflowMethod || 'flip');
@ -1931,7 +1933,7 @@ ItemSet.prototype._onMouseMove = function (event) {
  var item = this.itemFromTarget(event);
  if (!item) return;

  if (this.options.tooltip.followMouse) {
  if (this.options.showTooltips && this.options.tooltip.followMouse) {
    if (this.popup) {
      if (!this.popup.hidden) {
        var container = this.body.dom.centerContainer;
--- a/lib/timeline/optionsTimeline.js
+++ b/lib/timeline/optionsTimeline.js
@ -137,6 +137,7 @@ let allOptions = {
  template: {'function': 'function'},
  groupTemplate: {'function': 'function'},
  visibleFrameTemplate: {string, 'function': 'function'},
  showTooltips: { 'boolean': bool},
  tooltip: {
    followMouse: { 'boolean': bool },
    overflowMethod: { 'string': ['cap', 'flip'] },
@ -243,6 +244,7 @@ let configureOptions = {
    //  scale: ['millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'week', 'month', 'year'],
    //  step: [1, 1, 10, 1]
    //},
    showTooltips: true,
    tooltip: {
      followMouse: false,
      overflowMethod: 'flip'