CODEWITHSUNDEEP
javascriptfirefox
fabio
fabio

Reputation: 1365

Firefox show title attribute only once

When you move the mouse over a canvas I want it to show the coordinates.

When you change the mouse position (without move out of the canvas) I want it to show the new coordinates. A little delay would be nice.

I'm using a tooltip but this code in firefox doesn't work: the title appears only when you enter the canvas and then you have to move out and re-entering the canvas to show it again.

How can I solve?

document.getElementById('mycanvas').addEventListener(
    'mousemove', function(event) {
        mycanvas.title=event.layerX;
    });

Upvotes: 0

Views: 141

Answers (1)

Hugues M.
Hugues M.

Reputation: 20477

You can't control how the browser chooses to display an element's title. It's "usually displayed in a 'tool tip' popup when the mouse is over the displayed node", but the delay to appear and how often it is updated is not under your control.

Below is an example that tracks mouse position and shows coordinates in a popup that you have total control over (delay to appear, offsets, style etc). Move your mouse over the canvas, wait a second on a given position to let the popup appear, move elsewhere, wait, etc.

Noteworthy details:

  • Uses setTimeout at each mousemove event, and clearTimeout to clear previous one.
  • Uses jQuery to "normalize" the event, using pageX/pageY and $.offset(), to place the tooltip itself at appropriate coordinates (taking into account window scrolling), and make it show coordinates that are relative to the canvas. (I placed the canvas within a div that has a 20px margin to show that).

(I initially wanted to do it without jQuery, but browser quirks about mouse event properties made me abandon that idea, and after multiple edits I settled with jQuery to get something working)

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var background = document.getElementById('background');
if (background.complete) context.drawImage(background, 0, 0);
else background.onload = function() { context.drawImage(background, 0, 0); }
var caption = document.getElementById('caption');
var pos = {};
var timerID;
$(canvas).mousemove(function(e) {
  pos = {
    x: e.pageX - $(this).offset().left,
    y: e.pageY - $(this).offset().top,
    captionX: e.pageX,
    captionY: e.pageY,
  };
  caption.setAttribute('style', 'display:none');
  if (timerID) { clearTimeout(timerID); }
  timerID = setTimeout(showPosition, 500);
});
canvas.addEventListener('mouseleave', function(event) {
  caption.setAttribute('style', 'display:none');
  if (timerID) { clearTimeout(timerID); }
});
function showPosition() {
  caption.setAttribute('style', 'display: inline; left:'+(pos.captionX + 8)+"px; top: "+(pos.captionY + 8)+"px;");
  caption.innerHTML = "(" + pos.x + "," + pos.y + ")";
}
#background {visibility:hidden;}
#caption {
  display: none;
  position:absolute;
  text-align: center;
  margin: 3px;
  width: 120px;
  height: 24px;
  background: black;
  color: white;
}
<div style="margin: 20px">
  <canvas id="canvas" width="480" height="320"></canvas>
</div>
<div id="caption"></div>
<img src="https://i.imgur.com/PWSOy.jpg" id="background" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Related Questions