# Why text label upon mouseover doesn't work in this p5 code?

**URL:** <https://discourse.processing.org/t/why-text-label-upon-mouseover-doesnt-work-in-this-p5-code/8339>\
**Category:** Coding Questions\
**Created:** [February 13, 2019, 1:27am UTC](https://discourse.processing.org/t/why-text-label-upon-mouseover-doesnt-work-in-this-p5-code/8339 "2019-02-13T01:27:02Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [February 13, 2019, 1:27am UTC](https://discourse.processing.org/t/why-text-label-upon-mouseover-doesnt-work-in-this-p5-code/8339/1 "2019-02-13T01:27:03Z")

</div>

I have a code drawing ellipses based on input data, and there is supposed to be text label on the ellipses upon mouse rollover, but so far that doesn’t work.

If I remove if (this.over) condition, the label shows.  
If I use console.log to check if this.over condition is satisfied, it does too.

Any help appreciated.

```auto
// An Array of Bubble objects
var bubbles;
// A Table object
var table;

function preload() {
  table = loadTable("data/Sample.csv", "header");
}

function setup() {
  createCanvas(880, 570);
  loadData();
}

function draw() {
  background(255);
  textSize(32);
  
  // Display all bubbles
  for (var i = 0; i < bubbles.length; i++) {
    bubbles[i].display();
    bubbles[i].rollover(mouseX, mouseY);
  }

}

function loadData() {
  // Load CSV file into a Table object
  // "header" option indicates the file has a header row

  // The size of the array of Bubble objects is determined by the total number of rows in the CSV
  bubbles = []; 

  // You can access iterate over all the rows in a table
  for (var i = 0; i < 10; i++) {
    var row = table.getRow(i);
    // You can access the fields via their column name (or index)
    var x = row.get("a");
    var y = row.get("b");
    var d = row.get("c");
    var n = row.get("d");
    // Make a Bubble object out of the data read
    bubbles[i] = new Bubble(x,y,40);
    
  }
}

class Bubble {
  constructor(x, y, diameter) {
    this.x = 350 * Number(x);
    this.y = 500 * Number(y);
    this.diameter = 2*Number(diameter);
    this.over = false;
  }

  // Checking if mouse is over the Bubble
  rollover(px, py) {
    var d = dist(px, py, this.x, this.y);
    if (d < this.diameter/2) {
      this.over = true;
      console.log(d);
      console.log('over',this.over);
    } else {
      this.over = false;
    }
  }

  // Display the Bubble
  display() {
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(this.x, this.y, this.diameter, this.diameter);

   
    
    if (this.over) {
      textAlign(CENTER);
      noStroke();
      text('yo', this.x, this.y + this.diameter/2 + 20);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 13, 2019, 3:04am UTC](https://discourse.processing.org/t/why-text-label-upon-mouseover-doesnt-work-in-this-p5-code/8339/2 "2019-02-13T03:04:52Z")

</div>

because text color is  
fill(); // color  
but you say prior  
nofill();

[https://editor.p5js.org/kll/sketches/t3yzzeiO-](https://editor.p5js.org/kll/sketches/t3yzzeiO-)

* * *

you see my sketch?  
without your

- CSV file and
- class thing overhead

i created a example what show the problem  
( and the solution )

> **[How to create a Minimal, Complete, and Verifiable example - Help Center](https://stackoverflow.com/help/mcve)**
>
> Stack Overflow | The World’s Largest Online Community for Developers

and i loaded it at  
[p5js.org](http://p5js.org)  
so with a click everyone can read and test the code ( about THE problem only )  
and not need lots of typing / copy paste / try to create files to get your code running