How to add a tooltip to a p5.dom.js button

Hi all. I’d like to add a “tooltip” to a button in a p5.js code. The button is added with createButton() from the p5.dom.js library. There’s a ton of discussion out there, a lot in Stack Overflow, about tooltips … a typical example:

Also tooltips are discussed in standard educational resources:

However it’s gruesomely complicated, and if someone has got it working already that would be great. I want the user to be able to hover over a button, and display a tooltip, which could range from a few words, to maybe 50 words. Style not important for now, I believe I can hack that easily enough once the basics are working.

Many ATdhvaannkcse

Greg E.

1 Like


Thanks GoTo. Looks like there’s another tooltip possibility. I’ll try it. More soon. GE.

Well, couldn’t be easier. My code, simplified a bit:

  let button = createButton("button label text");
  button.position(x, y);
  button.size(width, height);"border-style", "inset");   //  I prefer this"outline", 0);   // get rid of irksome blue focus ring
  button.attribute("title", "This is the popup tooltip text");

I’m now trying to set the popup background to pale yellow, as per common tooltip style. Having a hard time. But the default is ok for now. See below …


So thanks again GoTo.

Ciao, GE.


I did tool tips on my project text2color. You can checkout the code here if you want. It uses p5.dom, bootstrap and popper.js.

1 Like

Thanks, I can see it. The tooltips are nice.