Reply To: on Click Event I Want to Show Tooltip

[Manoj Mohan]

@keval-panchal,

You can create a custom DOM for tooltip and show it on click of the dataPoint as shown in the code snippet below.

function showToolTipOnClick(e) {
    isDataPointClicked = true;
    if(dataPointShown !== e.dataPoint) {
      clicked = true;
      dataPointShown = e.dataPoint;
    } else {
      clicked = !clicked;	
    }

    if(customToolTipDOM === null) {
      customToolTipDOM = document.createElement("div");
      e.chart.container.appendChild(customToolTipDOM);
      customToolTipDOM.style.display = "none";
      customToolTipDOM.style.position = "absolute";
      customToolTipDOM.style.background = "#fff";
      customToolTipDOM.style.border = "1px solid #dedede";
      customToolTipDOM.style.borderRadius = "4px";
      customToolTipDOM.style.padding = "8px";
      customToolTipDOM.style.top = "0px";
      customToolTipDOM.style.left = "0px";
    }

    if(clicked) {
      left = Math.round(e.chart.axisX[0].convertValueToPixel(e.dataPoint.x)) + 30;
      customToolTipDOM.style.left =   "0px";
      customToolTipDOM.style.top =  Math.round(e.chart.axisY[0].convertValueToPixel(e.dataPoint.y)) + "px";
      customToolTipDOM.innerHTML = e.dataPoint.toolTipData;    
      customToolTipDOM.style.display = "block";
      

      if(left + customToolTipDOM.offsetWidth + 30 > e.chart.container.offsetWidth) {
        left = left - customToolTipDOM.offsetWidth - 30;
      }
      customToolTipDOM.style.left =  left + "px";
      
    } else {
      customToolTipDOM.style.display = "none";
    }

  }
  chart.container.addEventListener("click", function() {
    if(!isDataPointClicked && customToolTipDOM) {
      customToolTipDOM.style.display = "none";
      clicked = false;
    }
    isDataPointClicked = false;
  });

Also, check out this updated JSFiddle for showing toolTip on click of the dataPoint.

—-
Manoj Mohan
Team CanvasJS