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

**URL:** <https://discourse.processing.org/t/how-to-add-a-tooltip-to-a-p5-dom-js-button/12758>\
**Category:** Coding Questions\
**Created:** [July 17, 2019, 9:07am UTC](https://discourse.processing.org/t/how-to-add-a-tooltip-to-a-p5-dom-js-button/12758 "2019-07-17T09:07:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [July 17, 2019, 9:07am UTC](https://discourse.processing.org/t/how-to-add-a-tooltip-to-a-p5-dom-js-button/12758/1 "2019-07-17T09:07:23Z")

</div>

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](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](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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 17, 2019, 11:35am UTC](https://discourse.processing.org/t/how-to-add-a-tooltip-to-a-p5-dom-js-button/12758/2 "2019-07-17T11:35:35Z")

</div>

> **[title](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title)**
>
> The title global attribute contains text representing advisory information related to the element it belongs to.

[p5js.org/reference/#/p5.Element/attribute](http://p5js.org/reference/#/p5.Element/attribute)

---

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [July 17, 2019, 8:41pm UTC](https://discourse.processing.org/t/how-to-add-a-tooltip-to-a-p5-dom-js-button/12758/3 "2019-07-17T20:41:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [July 17, 2019, 9:57pm UTC](https://discourse.processing.org/t/how-to-add-a-tooltip-to-a-p5-dom-js-button/12758/4 "2019-07-17T21:57:05Z")

</div>

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

```auto
  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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f929bb66dd8ea7cc771ed5b6b25b58a2b46fd6ec.png)

So thanks again GoTo.

Ciao, GE.

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [July 17, 2019, 11:36pm UTC](https://discourse.processing.org/t/how-to-add-a-tooltip-to-a-p5-dom-js-button/12758/5 "2019-07-17T23:36:43Z")

</div>

I did tool tips on my project [text2color](https://text2color.com/). You can checkout the [code here](https://github.com/figraham/text2color/blob/c2e37afa227d5dbbfa50d47b9e6a24946dcc2f82/application/button/button.js#L67) if you want. It uses p5.dom, [bootstrap](https://getbootstrap.com/) and [popper.js](https://popper.js.org/).

---

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [July 18, 2019, 12:01am UTC](https://discourse.processing.org/t/how-to-add-a-tooltip-to-a-p5-dom-js-button/12758/6 "2019-07-18T00:01:23Z")

</div>

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