Estoy usando un gráfico de google de línea de tiempo. Basado en estopregunta, Estoy tratando de agregar funcionalidad para eliminar la información sobre herramientas SOLO cuando el mouse se mueve fuera de la información sobre herramientas. Mi función a continuación lo elimina con éxito una vez, pero luego arroja errores. Además, estoy buscando que SOLO se elimine después de que el mouse se salga de la información sobre herramientas.

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

A continuación se muestra todo el fragmento. ¿Cuál es la forma correcta de hacer esto?

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>