Entfernen Sie benutzerdefinierte Tooltip auf mouseout Google Diagramm

Question

Ich benutze ein Google-Timeline-Diagramm. Basierend auf dieser question, versuche ich, Funktionalität hinzuzufügen, um den Tooltip NUR entfernen, wenn die Maus aus dem Tooltip bewegt. Meine Funktion entfernt sie aber einmal erfolgreich und wirft danach Fehler. Außerdem suche ich nach NUR entfernt werden, nachdem die Maus aus dem Tooltip bewegt.

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

Unten ist das gesamte Snippet. Was ist der richtige Weg, dies zu tun?

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:test@test.com?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>

Answer 1

Ich denke, Sie 'onmouseout' auf den Tooltip hören möchten,
statt der chart
chart.ttclone.parentNode.addEventListener('mouseout', ...

auch - chart.ttclone.parentNode scheint beide mouseover & mouseout mehrere Male zu werfen

was zu einem e rror wenn Sie versuchen, removeChild mehrere Male

stattdessen versuchen style.display = 'none', oder etwas Ähnliches ...

siehe folgende Arbeits Schnipsel ...

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:test@test.com?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>