Display tooltip in canvas graph

问题:

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 

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

回答1:

You can display tooltips when your user moves over your chart's data-dot

This tooltip is simply a second canvas which draws the text from the linked textbox and is positions itself above the data-dot.

First you create an array to hold the tooltip info for each of your data-dots.

    var dots = []; 

For each tooltip, you will need:

• The x/y coordinate of the data-dot,
• The radius of the data-dot,
• The id of the textbox you want to get the tip from.
• You also need rXr which always == radius squared (needed during hit testing)

Here is the code for creating tooltip info to be stored in dots[]

    // define tooltips for each data point      for(var i = 0; i 

Then you set up a mousemove handler that looks through the dots array. The tooltip is displayed if the user moves inside any data=dot:

    // request mousemove events      $("#graph").mousemove(function(e){handleMouseMove(e);});      // show tooltip when mouse hovers over dot     function handleMouseMove(e){       mouseX=parseInt(e.clientX-offsetX);       mouseY=parseInt(e.clientY-offsetY);        // Put your mousemove stuff here       var hit = false;       for (var i = 0; i 

[ Edited to fit into your code ]

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/yLBjM/

回答2:

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 = []; // [...] dots.push({     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 

回答3:

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.mouseY > y -r && g.mouseY 

回答4:

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

HTML

      



Locate