Display tooltip in canvas graph

tooltip on canvas shape
chart js custom tooltip jsfiddle
bootstrap tooltip
how to display image in tooltip in html
on hover show full text tooltip
chartjs callbacks
ng2-charts custom tooltip

I am using html5 canvas element to draw a graph with dots denoting various points in here.

I want to display different tool-tip on different points on mouse hover.the text to be displayed as tool-tip will be provided by the user.

I tried but couldn't figure out how to add tool-tip to various points in the graph.The code I'm using for displaying dots is..

// Draw the dots
c.fillStyle = '#333';

for (var i = 0; i < data.values.length; i++) {
  c.arc(getXPixel(data.values[i].X), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true);

What addition should I make in this code so that i am able to display user input as tool-tip?

toolTip, You can also disable the toolTip by setting enabled property to false. var chart = new CanvasJS.Chart("container",; { . . toolTip:{ // toolTip properties . . }, . Display Tooltip on SVG and canvas elements in JavaScript Tooltip control Tooltip can be displayed on both SVG and Canvas elements. You can directly attach the <svg> or <canvas> elements to show tooltips on data visualization elements.

I tried markE's solution and it worked flawlessly, EXCEPT that when you scroll down just a little bit (e.g. when you have your canvas a little down the site).

Then the positions where your mouseover is recognized will shift to the bottom the same length and it could happen that they end up outside of the canvas and will not be recognized at all...

When you use mouseEvent.pageX and mouseEvent.pageY instead of .clientX and .clientY, you should be fine. For more context, here is my code:

// Filling the dots
var dots = [];
// [...]
    x: xCoord,
    y: yCoord,
    v: value,
    r: 5,
    tooltipRadius2: 7*7 // a little increased radius for making it easier to hit
// [...]

var tooltipCanvas = $('#tooltipCanvas')[0];
var tooltipCtx = tooltipCanvas.getContext('2d');
var canvasOffset = canvas.offset();
canvas.mousemove(function (e) {

    // getting the mouse position relative to the page - not the client
    var mouseX = parseInt(e.pageX - canvasOffset.left);
    var mouseY = parseInt(e.pageY - canvasOffset.top);

    var hit = false;
    for (var i = 0; i < dots.length; i++) {
        var dot = dots[i];
        var dx = mouseX - dot.x;
        var dy = mouseY - dot.y;
        if (dx * dx + dy * dy < dot.tooltipRadius2) {
            // show tooltip to the right and below the cursor
            // and moving with it
            tooltipCanvas.style.left = (e.pageX + 10) + "px";
            tooltipCanvas.style.top = (e.pageY + 10) + "px";
            tooltipCtx.clearRect(0, 0, tooltipCanvas.width, tooltipCanvas.height);
            tooltipCtx.textAlign = "center";
            tooltipCtx.fillText(dot.v, 20, 15);
            hit = true;
            // when a dot is found, don't keep on searching
    if (!hit) {
        tooltipCanvas.style.left = "-200px";

Tutorial on Chart ToolTips, Default Tooltip can be modified at dataSeries or dataPoint level. You can add content to be displayed in toolTip using toolTipContent. toolTipContent set at  toolTipContent – dataSeries/dataPoint. Default Tooltip can be modified at dataSeries or dataPoint level. You can add content to be displayed in toolTip using toolTipContent. toolTipContent set at dataPoint will override toolTipContent set at dataSeries level. toolTipContent can either be literal string or keywords. You can also use HTML tags.

Maybe you could play with the "title" attribute of graph, and adapt its contents depending on the mouse position. Try adding this handler to your fiddle code:

    graph.addEventListener("mousemove", (function(evt) {
            var rect = evt.target.getBoundingClientRect();
            var x = evt.clientX - rect.left;
            var y = evt.clientY - rect.top;
            var xd, yd;

            graph.title = "";
            for(var i = 0; i < data.values.length; i ++) {
                xd = getXPixel(data.values[i].X);
                yd = getYPixel(data.values[i].Y);
                if ((x > xd-5) && (x < xd+5) &&(y > yd-5) && (y < yd+5) ) {
                    graph.title = document.getElementById("text"+(i+1)).value;
    }), false);

See here: Updated fiddle

Edit: in the code above, I choose to display the tooltip if the mouse is in a square of 10x10 around the point. Of course, this can be adapted. Moreover, there is probably more tests to do, especially before calling the value on getElementById, which could potentially return null.

Hide /Show Tooltip on MouseOver, <br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->. 2. <div id="chartContainer" style="height: 360px; width: 100%;"></div>. JavaScript +  I don't want to show the legends on the side of the chart but i would like to show both the legend and the values on mouse hover only. Example, when user hovers the mouse over the pie chart; i want to show the country name and total revenue in the tooltip.

Short answer: as you've done it now, you can't.

Long answer: you can, but you need to get the exact mouse position every 30milliseconds or so. For each millisecond, you must check if the mouse is hovering over the dot, re-draw the screen and show the tooltip if he's doing it. Doing so by yourself can be tedious, this is why I use gee.js.

Check out this example: http://jsfiddle.net/Saturnix/Aexw4/

This is the expression which controls the mouse hovering:

g.mouseX < x + r && g.mouseX > x -r && g.mouseY > y -r && g.mouseY < y+r

Tooltip · Chart.js documentation, The tooltip configuration is passed into the options.tooltips namespace. position of the event in canvas coordinates * @returns {Point} the tooltip position */ Chart. The label callback can change the text that displays for a given data point. Display tooltips on a graph of an equation entered by the user in C#. Posted on January 2, 2018 by RodStephens. This example draws a graph of an equation entered by the user and the displays a tooltip on it when you move the mouse over the graph. See the post Graph equations entered by the user in C# for information about how the program draws the graph.

CSS ONLY method here. No javascript, JQUERY, or special library required. Lightweight, sexy.


<!DOCTYPE html>
    <br />
    <br />
    <br />
    <br />
<span class="popup" popupText="This is some popup text">Locate </span>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/f/f4/The_Scream.jpg/220px-The_Scream.jpg"
<!--I used an image here but it could be anything, including a canvas-->


    position:absolute; /*allows span to be on top of image*/
    border: solid; /*a border, just for demonstration purposes*/
    border-color: #333 ;
    border-width: 1px;
    width:220px; /*set the height, width equal to the size of your ing/canvas*/
/*this bit draws the bottom arrow of the popup, it can excluded entire if you don't want it*/
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 300px;
    content: "";
    left: 40px;
    position: absolute;
    z-index: 99;
/*this bit draw the main portion of the popup, including the text*/
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 306px;
    color: #fff;
    content: attr(popupText); /*this is where the text gets introduced.*/
    left: 20px;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 150px;

Here is the fiddle. http://jsfiddle.net/honkskillet/RKnEu/

Using tooltips, Can I show charts in tooltips? Specify the HTML for the tooltip as normal (​including the <canvas> tag). The tooltip label configuration is nested below the tooltip configuration using the callbacks key. The tooltip has the following callbacks for providing text. For all functions, this will be the tooltip object created from the Chart.Tooltip constructor.

Tooltip on circle drawn on HTML5 canvas, Hi, I am drawing circles on canvas, i want to show some remarks on hover or as .com/questions/17064913/display-tooltip-in-canvas-graph. I am using "line and stacked column chart" visual in my report. I inserted Units of measurement in Tooltip fileld. When I hover on Total Sale Value (Column Values), it is showing Product, Total Sale Value & Unit. When I hover on Quantity (line Values), it is showing only Product & Quantity. But

Popups vs. Canvas for WPF Chart Tooltips, If you have many charts, or very small charts on the screen, sometimes the tooltip Tooltips use the default ModifierSurface canvas to display Tooltip Controls. The program uses an inverse transformation to see whether the mouse (in form coordinates) is over a data point (in graph coordinates) so it can display a tooltip. The program breaks drawing tasks into several methods to make things a little simpler.

Client Side Chart Widget in HTML 5: Part 8 (Pie Chart With Custom , caretHeight + tooltip.caretPadding;; }; // Display, position, and set styles for font; tooltipEl.css({; opacity: 1,; left: tooltip.chart.canvas.offsetLeft +  To get started, create a new report page by clicking the + button, found along the bottom of the Power BI Desktop canvas, in the page tabs area. The button is located beside the last page in the report. Your tooltip can be any size, but keep in mind that tooltips hover over the report canvas, so you might want to keep them reasonably small.

  • i tried incorporating your code in my code here jsfiddle.net/nshX6/9 .Even though i am not getting an error I'm not getting any output either..what am i doing wrong in my code..Please help..
  • I have edited my answer to show how to include tooltips in your chart. Happy coding! :)
  • I just have i doubt..how to set the word wrap property of the "tip"canvas so that i the size of the box remains fixed and scroll bars appear if a large text is entered????
  • can you give an example in which text box values are being displayed as tooltip???and it says on the website of gee.js that it is no longer supported and one should use paper.js instead..
  • This does not answer the original question. You draw the tooltip on top of the control. He wants to draw it anywhere inside the canvas based on the canvas content. If he has 2 circles, he wants to be able to display 1 different tooltip near each circle. Considering the circles position is dynamic.