Как вывести подсказку (tooltip) рядом с курсором на JS

Question

Подскажите как такое сделать?

Если курсор мышки находится внутри тега <div class="canvas"></div>, то выводить подсказку рядом с курсором блок <canvas width="100" height="100"></canvas> и этот блок не должен перекрываться, то есть быть всегда сверху

В данном случае нужно чисто на JS, вариант hover в css не подойдет.

let canvas = '<canvas width="100" height="100"></canvas>';
$('.canvas').mousemove(function(e){
        
});

.canvas {
  width: 50px;
  height: 50px;
  border:1px solid #000000;
}
canvas {
  border:1px solid #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="canvas"></div>

Answer 1

let canvas = new Tip_canvas();
let ctx = canvas.getContext("2d");

let tip_storage = new Tip_drawers(canvas);
// Набор функций-рисовашек, которые будут вызываться при наведении на блоки.

let div = document.querySelectorAll(".div");
for (let i = 0; i < div.length; i++) {
  div[i].addEventListener("mouseenter", show_tip);
  div[i].addEventListener("mouseleave", hide_tip);
  div[i].addEventListener("mousemove",  move_tip);
}

function show_tip() {
  tip_storage[this.dataset.call](ctx);
  // this.dataset.call - строка, по совместительству - название функции.

  canvas.style.display = "block";
}

function hide_tip() {  
  canvas.style.display = "none";
}

function move_tip(e) {
  let WID = document.documentElement.clientWidth;
  let HEI = document.documentElement.clientHeight;
  
  let x = e.pageX + 10 - (canvas.width + 20) * (WID < e.pageX + canvas.width + 20);
  let y = e.pageY + 10 - (canvas.width + 20) * (HEI < e.pageY + canvas.height + 20);
  // (!)
  
  canvas.style.left = x + "px";
  canvas.style.top = y + "px";
}


/***/
function Tip_drawers() {
  this.square = function(ctx) {
    this.clear(ctx);
    ctx.fillStyle = "#045acf";
    
    ctx.beginPath();
      ctx.fillRect(10, 10, 80, 80);
      ctx.fill();    
  };
  
  this.circle = function(ctx) {
    this.clear(ctx);
    ctx.fillStyle = "#922";
    
    ctx.beginPath();
      ctx.arc(50, 50, 40, 0, 2 * Math.PI);
      ctx.fill();    
  };
  
  this.clear = function(ctx) {    
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  };
}

function Tip_canvas() {
  let canvas = document.createElement("canvas");
  canvas.width = canvas.height = "100";
  canvas.className = "tip";
  
  canvas.style.display = "none";
  
  document.body.appendChild(canvas);
  
  return canvas;
}

.div {
  height: 49vh;
  margin: 4px;
  border: 1px solid #f00;
}

canvas.tip {
  position: absolute;
  z-index: 99999;
  border: 1px solid #f00;
  box-shadow: 1px 1px 5px #000;
  background-color: white;
}

<div class="div" data-call="square"></div>
<div class="div" data-call="circle"></div>

(!) let x = e.pageX + 10 - (canvas.width + 20) * (WID < e.pageX + canvas.width + 20);

e.pageX + 10 — левая граница canvas будет размещена на +10 пикселей от текущего положения мышки (pageX). Когда оно будет доходить до правого края, блок будет выпадать за рамки страницы. В таких случаях нужно перенести его в левую часть.

WID < e.pageX + canvas.width + 20 — Если ширина страницы оказалась меньше, чем x координата мышки + ширина холста (+20 от балды, скроллбар), выражение вернет true. А т.к. использована операция умножения, true превратится в число 1, и окажется, что надо вычесть вот столько: - (canvas.width + 20) * 1.

А если выражение вернет false, оно превратится в 0, множитель не будет учтен.

Answer 2

Если, я вас правильно понял, можно использовать свойства pageX и pageY из интерфейса MouseEvent, чтобы узнать позицию курсора и затем применить координаты к canvas.

Допустим, вот так:

const delta = 5;
let canvas = '<canvas id="tooltip" width="100" height="100"></canvas>';
$('.canvas').mouseenter(function(e) {
  $('.canvas').append(canvas);
  draw();
})
$('.canvas').mouseleave(function(e) {
  $('canvas').remove()
})
$('.canvas').mousemove(function(e) {
  $('#tooltip').offset({
    top: e.pageY + delta,
    left: e.pageX + delta
  })
});

function draw() {
  var canvas = document.getElementById("tooltip");
  if (canvas.getContext) {
    var context = canvas.getContext("2d");
    context.rect(0, 0, 100, 100);
    context.fillStyle = "black";
    context.fill();
    context.font = "small-caps bold 20pt 'Comic Sans MS'";
    context.textAlign = "left";
    context.fillStyle = "white";
    context.fillText("Hello", 5, 40);
    context.fillText("World", 5, 80);
  }
}

.canvas {
  width: 50px;
  height: 50px;
  border: 1px solid #000000;
}

canvas {
  border: 1px solid #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="canvas"></div>

БЛОГ НА HUSL

Как вывести подсказку (tooltip) рядом с курсором на JS

Ответы (2 шт):