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

p5.js Coding Questions
1

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:

https://stackoverflow.com/questions/18359193/plain-javascript-tooltip/18359711#18359711

Also tooltips are discussed in standard educational resources:

https://www.w3schools.com/css/css_tooltip.asp

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
2

p5js.org/reference/#/p5.Element/attribute

2 Likes
3

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

4

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

  let button = createButton("button label text");
  button.position(x, y);
  button.size(width, height);
  button.style("border-style", "inset");   //  I prefer this
  button.style("outline", 0);   // get rid of irksome blue focus ring
  button.mousePressed(callback);
  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 …

tooltip

So thanks again GoTo.

Ciao, GE.

2 Likes
5

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
6

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