在mouseout Google图表上删除自定义工具提示 | Google图表上删除自定义工具提示

本文介绍了在mouseout Google图表上删除自定义工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用时间轴google chart。根据此，我试图添加功能以在鼠标移出工具提示时删除工具提示。我的功能下面的删除它成功一次，但然后抛出错误后。此外，我只能在鼠标移出工具提示后删除它。

  google.visualization.events。 add（$）$ {
 if（chart.ttclone.parentNode！= null）{
 chart.ttclone.parentNode.removeChild（chart.ttclone）
} 
}）;

下面是整个代码段。什么是正确的方法这样做？

  google.charts.load（'current'，{callback：function（）{var container = document.getElementById '）; var chart = new google.visualization.Timeline（container）; var dataTable = new google.visualization.DataTable（）; dataTable.addColumn（{type：'string'，id：'President'}）; dataTable.addColumn （{type：'string'，id：'Name'}）; dataTable.addColumn（{type：'string'，role：'tooltip'，'p'：{'html'：true}}）; （{type：'date'，id：'Start'}）; dataTable.addColumn（{type：'date'，id：'End'}）; dataTable.addRows（[['Washington'，'test'，createToolTip （1797,2,4）]，['Adams'，'test'，createToolTip（），new Date（1797,2,4），new Date（1797,2,4） 1801,2,4）]，['Jefferson'，'test'，createToolTip（），new Date（1801,2,4），new Date（1809,2,4）]] // select-handler google.visualization.events.addListener（chart，'select'，function（e）{//内置工具提示var tooltip = document.querySelector（'。google-visualization-tooltip：not ]）'）; //当有任何if（chart.ttclone）时删除上一个克隆{chart.ttclone.parentNode.removeChild（chart.ttclone）} //创建内置工具提示的克隆.ttclone = tooltip .cloneNode（true）; //创建一个自定义属性，以便能够区分//内置工具提示和克隆chart.ttclone.setAttribute（'clone'，true）; //将clone注入到文档chart.ttclone.style中。 pointerEvents ='auto'; tooltip.parentNode.insertBefore（chart.ttclone，chart.tooltip）;}）; function createToolTip（）{var mainDiv ='< div style =z-index：1000;>'; var list ='< ul class =google-visualization-tooltip-action-list>'+'< li class =google-visualization-tooltip-action>'+'< span style = font-family：Arial; font-size：12px; color：rgb（0,0,0）; margin：0px; text-decoration：none; font-weight：bold;>'+'< a href = mailto：[email protected]？Subject = test> Contact< / a>'+'< / span>'+'< / li>'+'< / ul> var endMainDiv ='< / div>'; var tooltip = mainDiv + list + endMainDiv; return tooltip; } google.visualization.events.addListener（chart，'onmouseout'，function（e）{if（chart.ttclone.parentNode！= null）{chart.ttclone.parentNode.removeChild（chart.ttclone）}}）; chart.draw（dataTable，{tooltip：{isHtml：true}}）; }，package：['timeline']}）;

  .google-visualization-tooltip {opacity：0！重要; max-width：200px！important;}。google-visualization-tooltip [clone] {opacity：1！important;} html，body，timeline {width：100％;高度：100％; margin：0; padding：0;}

 < script src =https ：//www.gstatic.com/charts/loader.js>< / script>< div id =timelinestyle =height：90％>< / div>

解决方案

我想你想听在工具提示上的'onmouseout'，

而不是图表

chart.ttclone.parentNode.addEventListener（'mouseout'，...

也 - chart.ttclone.parentNode 似乎抛出 mouseover & mouseout 多次

多次尝试 removeChild 可能会导致错误

，请尝试 style.display ='none'或类似的东西...

查看以下工作片段...

  google.charts.load current'，{callback：function（）{var container = document.getElementById（'timeline'）; var chart = new google.visualization.Timeline（container）; var dataTable = new google.visualization.DataTable（）; dataTable.addColumn（{type：'string'，id：'President'}）; dataTable.addColumn（{type：'string'，id：'Name'}）; dataTable.addColumn（{type：'string'，role：'tooltip'，'p'：{'html'：true}}）; dataTable.addColumn（{type：'date'，id：'Start'}）; dataTable.addColumn（{type：'date'，id：'End'}）; dataTable.addRows（[['Washington'，'test'，createToolTip（），new Date（1789，3，30），new Date（1797,2,4）]，['Adams'，'test'，createToolTip ），new Date（1809,2,4），new Date（1809,2,4），new Date（1801,2,4）]，['Jefferson'，'test'，createToolTip ，2,4）]]）; // select-handler google.visualization.events.addListener（chart，'select'，function（e）{//内置工具提示var tooltip = document.querySelector（'。google-visualization-tooltip：not ]）'）; //当有任何if（chart.ttclone）时删除上一个克隆{chart.ttclone.parentNode.removeChild（chart.ttclone）} //创建内置工具提示的克隆.ttclone = tooltip .cloneNode（true）; //创建一个自定义属性，以便能够区分//内置工具提示和克隆chart.ttclone.setAttribute（'clone'，true）; //将clone注入到文档chart.ttclone.style中。 pointerEvents ='auto'; tooltip.parentNode.insertBefore（chart.ttclone，chart.tooltip）; chart.ttclone.parentNode.addEventListener（'mouseout'，function（）{chart.ttclone.style.display ='none';} ，false）; chart.ttclone.parentNode.addEventListener（'mouseover'，function（）{chart.ttclone.style.display ='block';}，false）; }）; function createToolTip（）{var mainDiv ='< div style =z-index：1000;>'; var list ='< ul class =google-visualization-tooltip-action-list>'+'< li class =google-visualization-tooltip-action>'+'< span style = font-family：Arial; font-size：12px; color：rgb（0,0,0）; margin：0px; text-decoration：none; font-weight：bold;>'+'< a href = mailto：[email protected]？Subject = test> Contact< / a>'+'< / span>'+'< / li>'+'< / ul> var endMainDiv ='< / div>'; var tooltip = mainDiv + list + endMainDiv; return tooltip; } chart.draw（dataTable，{tooltip：{isHtml：true}}）; }，package：['timeline']}）;

  .google-visualization-tooltip {opacity：0！important; max-width：200px！important;}。google-visualization-tooltip [clone] {opacity：1！important;} html，body，timeline {width：100％;高度：100％; margin：0; padding：0;}

 < script src =https ：//www.gstatic.com/charts/loader.js>< / script>< div id =timelinestyle =height：90％>< / div>

I'm using a timeline google chart. Based on this question, I'm trying to add functionality to remove the tooltip ONLY when the mouse moves out of the tooltip. My function below removes it successfully once but and then throws errors afterwards. In addition, im looking for it to ONLY be removed after the mouse moves out of the tooltip.

google.visualization.events.addListener(chart, 'onmouseout', function (e) {
     if ( chart.ttclone.parentNode != null) {
         chart.ttclone.parentNode.removeChild(chart.ttclone)
     }
});

Below is the entire snippet. What is the correct way to do this?

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({
      type: 'string',
      id: 'President'
    });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true}});
    dataTable.addColumn({
      type: 'date',
      id: 'Start'
    });
    dataTable.addColumn({
      type: 'date',
      id: 'End'
    });
    dataTable.addRows([
      ['Washington', 'test', createToolTip(), new Date(1789, 3, 30), new Date(1797, 2, 4)],
      ['Adams', 'test', createToolTip(), new Date(1797, 2, 4), new Date(1801, 2, 4)],
      ['Jefferson', 'test', createToolTip(), new Date(1801, 2, 4), new Date(1809, 2, 4)]
    ]);
    //select-handler
    google.visualization.events.addListener(chart, 'select', function(e) {
      //the built-in tooltip
      var tooltip = document.querySelector('.google-visualization-tooltip:not([clone])');
      //remove previous clone when there is any
      if (chart.ttclone) {
        chart.ttclone.parentNode.removeChild(chart.ttclone)
      }
      //create a clone of the built-in tooltip
      chart.ttclone = tooltip.cloneNode(true);
      //create a custom attribute to be able to distinguish
      //built-in tooltip and clone
      chart.ttclone.setAttribute('clone', true);
      //inject clone into document
      chart.ttclone.style.pointerEvents = 'auto';
      tooltip.parentNode.insertBefore(chart.ttclone, chart.tooltip);
    });

    function createToolTip() {
       var mainDiv = '<div style="z-index: 1000;">';
       var list =
            '<ul class="google-visualization-tooltip-action-list">' +
                '<li class="google-visualization-tooltip-action">' +
                    '<span style="font-family: Arial; font-size: 12px; color: rgb(0, 0, 0); margin: 0px; text-decoration: none; font-weight: bold;">' +
                        '<a href="mailto:[email protected]?Subject=test">Contact</a>' +
                    '</span>' +
                '</li>' +
            '</ul>';
       var endMainDiv = '</div>';
       var tooltip = mainDiv + list + endMainDiv;
       return tooltip;
    }

            google.visualization.events.addListener(chart, 'onmouseout', function (e) {
            if ( chart.ttclone.parentNode != null) {
                chart.ttclone.parentNode.removeChild(chart.ttclone)
            }
        });

    chart.draw(dataTable, {tooltip: {isHtml: true }});
  },
  packages: ['timeline']
});

.google-visualization-tooltip {
  opacity: 0 !important;
  max-width: 200px !important;
}
.google-visualization-tooltip[clone] {
  opacity: 1 !important;
}
html,
body,
timeline {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="height:90%"></div>

解决方案

I'm thinking you want to listen for 'onmouseout' on the tooltip,
rather than the chart
chart.ttclone.parentNode.addEventListener('mouseout', ...

also -- chart.ttclone.parentNode seems to throw both mouseover & mouseout multiple times

which could cause an error if you try removeChild multiple times

instead, try style.display = 'none', or something similar...

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({
      type: 'string',
      id: 'President'
    });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true}});
    dataTable.addColumn({
      type: 'date',
      id: 'Start'
    });
    dataTable.addColumn({
      type: 'date',
      id: 'End'
    });
    dataTable.addRows([
      ['Washington', 'test', createToolTip(), new Date(1789, 3, 30), new Date(1797, 2, 4)],
      ['Adams', 'test', createToolTip(), new Date(1797, 2, 4), new Date(1801, 2, 4)],
      ['Jefferson', 'test', createToolTip(), new Date(1801, 2, 4), new Date(1809, 2, 4)]
    ]);
    //select-handler
    google.visualization.events.addListener(chart, 'select', function(e) {
      //the built-in tooltip
      var tooltip = document.querySelector('.google-visualization-tooltip:not([clone])');
      //remove previous clone when there is any
      if (chart.ttclone) {
        chart.ttclone.parentNode.removeChild(chart.ttclone)
      }
      //create a clone of the built-in tooltip
      chart.ttclone = tooltip.cloneNode(true);
      //create a custom attribute to be able to distinguish
      //built-in tooltip and clone
      chart.ttclone.setAttribute('clone', true);
      //inject clone into document
      chart.ttclone.style.pointerEvents = 'auto';
      tooltip.parentNode.insertBefore(chart.ttclone, chart.tooltip);
      chart.ttclone.parentNode.addEventListener('mouseout', function () {
        chart.ttclone.style.display = 'none';
      }, false);
      chart.ttclone.parentNode.addEventListener('mouseover', function () {
        chart.ttclone.style.display = 'block';
      }, false);
    });

    function createToolTip() {
      var mainDiv = '<div style="z-index: 1000;">';
      var list =
        '<ul class="google-visualization-tooltip-action-list">' +
          '<li class="google-visualization-tooltip-action">' +
            '<span style="font-family: Arial; font-size: 12px; color: rgb(0, 0, 0); margin: 0px; text-decoration: none; font-weight: bold;">' +
              '<a href="mailto:[email protected]?Subject=test">Contact</a>' +
            '</span>' +
          '</li>' +
        '</ul>';
      var endMainDiv = '</div>';
      var tooltip = mainDiv + list + endMainDiv;
      return tooltip;
    }

    chart.draw(dataTable, {tooltip: {isHtml: true }});
  },
  packages: ['timeline']
});

.google-visualization-tooltip {
  opacity: 0 !important;
  max-width: 200px !important;
}
.google-visualization-tooltip[clone] {
  opacity: 1 !important;
}
html,
body,
timeline {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="height:90%"></div>

这篇关于在mouseout Google图表上删除自定义工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！