Don't show label tooltip in Chart.js if hover is less than 1 second

[vasyl-shumskyi]

I have some information inside the doughnut chart and want to prevent tooltip blinks when this info is accessed with the mouse.

Check out the attached screenshot below:

I am trying to implement the following solution:

• Not show the label tooltip if the label hover is less than 1 second.
• If the label hover is more than 1 second (i.e. the cursor is stuck on the label for some time) then I need to show the tooltip.

Check out the following JSFiddle

const chart_data = [6,5,4,3,2,1]

function chart() {
 
  var options = {
  
    type: 'doughnut',
   
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
          label: '# of Votes',
          data: chart_data,
          backgroundColor: [ "Red", "Blue", "Yellow", "Green", "Purple", "Orange" ],
          borderWidth: 1,
        }
      ]
    },
    options: {
       cutoutPercentage : 65,
       responsive: false,
       
       tooltips: {
          callbacks: { label: label_tooltip }
        },
    }
  }
  
  var ctx = document.getElementById('chart-container').getContext('2d')
  
  new Chart(ctx, options)
}

function label_tooltip(item, data) {

    var index = item.index
    var name = data.labels[index]

    var value = data.datasets[0].data[index]

    var tooltip = ' ' + name + ' - ' + value

    return tooltip
}

chart()

document.getElementById('chart-info').innerHTML = chart_data.reduce((a, b) => a + b, 0) + '<br>TOTAL'

[LeeLenaleee]

For a custom tooltip you will need to put enabled: false in your tooltips option. in the timeout only 2 things that still need to be checked are if you are still on the element and if the data has changed. In both cases you will need to return out of it also

Example: https://jsfiddle.net/Leelenaleee/ks3wgvLp/8/

[vasyl-shumskyi]

Thanks for your answer.

But looks like the tooltip is still showing, but after 1 second. Nevertheless, I am out of the element (i.e visited the element for less than 1 second).

I don't want to show the tooltip at all if the element hovered less than 1 second. But show the tooltip otherwise.

I have some information inside the doughnut chart and want to prevent tooltip blinks when this info is accessed with the mouse.

[kurkle]

Just need to clear the timer: https://jsfiddle.net/yfrw57dz/

[vasyl-shumskyi]

I updated the question with a better description of the problem I am trying to solve.