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.
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.style("border-style", "inset"); // I prefer this
button.style("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.
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.
Thanks, I can see it. The tooltips are nice.