Closing C3 Tooltip nach der Interaktion mit ihm

Question

Ich lerne C3.js für Diagramme zu verwenden, und ich würde gerne besser anpassen Tooltip-Funktionalität. Normalerweise erscheinen C3-Tooltipps, wenn Sie den Mauszeiger über Daten bewegen. Example here. Sie bestehen nicht, und Sie können nicht mit ihnen interagieren.

Ich habe hier Code auf Stack Overflow (link here) gefunden, um ein Timeout und CSS hinzuzufügen, damit der Tooltip persistent bleibt und dem Benutzer erlaubt, damit zu interagieren, aber ich weiß nicht, wie ich den Tooltip danach wieder schließen kann Der Benutzer klickt irgendwo auf das Diagramm oder den Tooltip oder verwendet ein Timeout. Ich denke, es ist ärgerlich, wenn der Tooltip für immer auf dem Diagramm bleibt, nachdem er erscheint.

JSFiddle

sollte es eine Funktion sein, die ich anrufen kann oder außer Kraft setzen, sollte nicht da? Ich habe versucht, eine Onclick-Funktion hinzuzufügen, so dass ich, wenn ich auf einen Datenpunkt klicke, etwas tun würde, aber ich habe keinen Weg gefunden, es so zu machen, wie ich es wollte. Ich folgte this link, um herauszufinden, wie man den onclick macht.

Ich bin mir nicht sicher, dass es mich speziell interessiert, wie das Schließen des Tooltips ausgelöst werden würde. Hier ist der Code aus dem JSFiddle, der die Interaktion mit dem Tooltip veranschaulicht und zeigt, wie er nicht geschlossen wird.

CSS:

.c3-tooltip-container { 
    background-color: #ccc; 
    border: solid 1px black; 
    padding: 20px; 
    pointer-events: auto !important; 
} 

JS:

var features = dates = defects = [ 
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10 
]; 

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['data1', 30000, 20000, 10000, 40000, 15000, 250000], 
      ['data2', 100, 200, 100, 40, 150, 250] 
     ], 
    }, 
    tooltip: { 
     position: function() { 
      var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments); 
      position.top = 0; 
      return position; 
     }, 
     contents: function (data, defaultTitleFormat, defaultValueFormat, color) { 
      var $$ = this, config = $$.config, 
      titleFormat = config.tooltip_format_title || defaultTitleFormat, 
      nameFormat = config.tooltip_format_name || function (name) { return name; }, 
      valueFormat = config.tooltip_format_value || defaultValueFormat, 
      text, i, title, value; 
      text = "<div id='tooltip' class='d3-tip'>"; 
      title = dates[data[0].index]; 
      text += "<span class='info'><b><u>Date</u></b></span><br>"; 
      text += "<span class='info'>" + title + "</span><br>"; 
      text += "<span class='info'><b><u>Features</u> : </b> " + features[data[0].index] + "</span><br>"; 
      text += "<span class='info'><b><u>Enhancements</u> : </b> " + defects[data[0].index] + "</span><br>"; 
      text += "</div>"; 
      return text; 
     } 
    } 
}); 

Answer 1

Wenn Sie Tooltip, wenn
(1) ausblenden möchten Sie darauf klicken oder
(2) Timeout überschritten
Sie brauchen

• Funktion Tooltip Sichtbarkeit
• Funktion zur Verarbeitung Klickaktion
• Timer Speicher für die Timer-Stopp/Neustart

So etwas wie dies für die Änderung:

// 1 
window.action = function() { 
    // do something 
    // ... 
    clearTimeout(timeout); 
    hideTooltip(); 
} 

// timer storage 
var timeout; 

var chart = c3.generate({ 
    ... 
    tooltip: { 
     position: ... 
     contents: function (...) { 
      // 2 
      clearTimeout(timeout); 
      timeout = setTimeout(hideTooltip, 5000); // auto-hide after 5 seconds 

      ... 
      text = "<div id='tooltip' class='d3-tip' onclick='window.action()'>"; 
      ... 
      return text; 
     } 
    } 
}); 

// disable default 
c3.chart.internal.fn.hideTooltip = function(){}; 

// custom tooltip hiding 
var hideTooltip = function() { 
    d3.select('.c3-tooltip-container').style('display', 'none'); 
} 

Schauen Sie sich updated fiddle an.