Show tooltip when hovered over stripline label

• December 14, 2022 at 9:58 am #41476
  
  mustadirmahmood

  Hello,

  I have this situation where I would like to display a tooltip when user hovers over the stripline label.

  Please let me know if there is a way to implement this.

  https://jsfiddle.net/a4uw9073/3/

  December 14, 2022 at 8:07 pm #41600
  
  Thangaraj Raman

  @mustadirmahmood,

  Sorry, it is not possible to display a tooltip for stripline labels as of now. However, as a workaround, you can position the stripline label to the center of the plot area using the labelAlign property and add a scatter point for displaying the tooltip content. Please take a look at the code snippet below:

  chart.addTo("data", {
      type: "scatter",
      markerSize: 0,
      highlightEnabled: false,
      toolTipContent: "Content to be displayed on hover",
      dataPoints: [{
        x: (chart.axisX[0].viewportMaximum + chart.axisX[0].viewportMinimum) / 2 , 
        y: chart.axisY[0].stripLines[0].value
      }]
  })

  Please check this JSFiddle for a working example.

  

  —
  Thangaraj Raman
  Team CanvasJS

  January 24, 2023 at 10:06 am #42016
  
  mustadirmahmood

  Hi there! Thanks for the reply. However, your proposed solution is not working for me.
  Here is a fiddle representation of my current situation. https://jsfiddle.net/hmepdt28/
  I want to show a tooltip when user hovers over the label “25” (or anywhere near it).

  Thanks again

  January 24, 2023 at 7:14 pm #42027
  
  Thangaraj Raman

  @mustadirmahmood,

  As mentioned earlier, it is not possible to display tooltip for stripline labels as of now. However, you can position a hidden div on top of a stripline label based on its bound and display a custom tooltip for that div with a few lines of code. Please take a look at the code snippet below.

  function addStriplineLabelTooltip() {
      var stripLine = chart.axisX2[0].stripLines[0];
      var tooltip = $("<div class='tooltip'><span class='tooltiptext'>Tooltip Content</span></div>");
      $(tooltip).css({"height": "12px", "width": stripLine.get("label").width() + "px", "left": stripLine.get("bounds").x1 + "px", "top": stripLine.get("bounds").y1 - 11 + "px"})
      $(chart.container).append(tooltip);  
  }

  Please check this updated JSFiddle for a working example.

  

  —
  Thangaraj Raman
  Team CanvasJS