p5.js: How can I make text appear when my mouse hovers over a different element in the sketch in processing?

Question

I have text in my sketch file that appears constantly on the screen. When I hover on that piece of text, I want to display more information on that introductory text on the corner of the browser window, without affecting the rest of the screen. How can I go about doing this?

Answer 1

It's hard to know what you want exactly without seeing the code, but here's some pointers:

You could create an element using createElement and add an on hover event. When you hover over that element you can display your help text. In the example below I've created an element hoverOverMe which sets a boolean value showInfo to true if it's being hovered over and false if it isn't - then I'm displaying some text based on that.

let hoverOverMe;
let showInfo = false;
function setup() {
  createCanvas(400, 400);
  hoverOverMe = createElement("h1", "Hover over me");
  hoverOverMe.mouseOver(() => showInfo = true);
  hoverOverMe.mouseOut(() => showInfo = false);
}

function draw() {
  background(220);
  textAlign(CENTER);
  
  if (showInfo) {
    textSize(40);
    text("I'm info text", width / 2, height/2);
  }
}

<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>