[SOLVED] How do I hide a text element until my mouse passes over it or clicks it?

I cannot figure out how to get a text element to be hidden until the mouse passes over it. I have the text element apart of an entity and right now its just hanging in front of it, where I want it to be seen. Please give me any suggestions on how to achieve this.

Your best bet is to have another element to act as the ‘hitbox’ and use the mouseenter and mouseleave events on the hitbox element (https://developer.playcanvas.com/en/user-manual/user-interface/input/) and hide/show the text element entity.

e.g https://playcanvas.com/editor/scene/552358

Thank you so much but is there a way for it to happen in the opposite order. I want it to be hidden on mouseleave and shown on mouseenter. I tried reversing those two places and also tried switching the true and false in the coding but it wouldn’t do the desired outcome.

Yes, you just flip the logic and disable the text element entity in the editor so it starts ‘off’

I did and its not working. here is the code. i have also tried putting false enabled for mouseleave and enabled true for mouseenter.

…var HideShowText = pc.createScript(‘hideShowText’);

HideShowText.attributes.add(‘textEntity’, {type: ‘entity’});

// initialize code called once per entity
HideShowText.prototype.initialize = function() {
this.entity.element.on(‘mouseleave’, function (evt) {
this.textEntity.disabled = true;
}, this);

this.entity.element.on('mouseenter', function (evt) {
    this.textEntity.enabled = true;
}, this);

};

// update code called every frame
HideShowText.prototype.update = function(dt) {

};

nevermind I got it to work I forgot to put input for the group. Thank You So much for your help!!!

Other options to hide the contents without requiring another elements (which is a fine solution):

  • set the text string to "" to hide the content but fix the width and height.
  • set the opacity to 0