Show tooltip when hovered over stripline label

[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/

[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

[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

[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