Show text label when hover

[avoba]

Hi,

 

I'm trying to show a text label when I hover the mouse over a mesh (sphere). It needs to show up at the exact position of the sphere.

Something like:

OnPointerOverTrigger -> show text label 

OnPointerOutTrigger -> hide text label

Not sure if I have to use actions... trigger... pick()...text2d. Couldn't figure it out.

Is there a way to do it using HTML?

Playground: http://www.babylonjs-playground.com/#NH8WYW

Can anyone help me?

Thanks

[Wingnut]

Hi @avoba, welcome. 

http://www.babylonjs-playground.com/#NH8WYW#1

Here is a playground that shows mouseover/out label... using actionManager and world space canvas 2d.  Perhaps not the BEST way, but it is ONE way.    Canvas 2d system is actually wonderful... powerful... takes some code to activate, as you can see. 

When I say "perhaps bad way"... it is MY CODE that could be bad.    Canvas2d system is fine.

And yes, you can use HTML:  http://www.babylonjs-playground.com/#NH8WYW#2

Absolute-position html elements!  Yay!  We just change our onOver and onOut handler funcs, right?  Same actionManager operations.

Unfortunately, in HTML, the pop-up label aligns to its upper left corner.  I'm not sure how to "center" the HTML label... perfectly atop the mouseOver point.  Sometimes difficult to make label align properly.  The values used in CSS top and left (lines 45/46) are very important.

I'll let you study these two playgrounds, and if you have questions, ask them.  Freely do more edits, hit RUN's, make saves, get zips... you cannot hurt anything in our playground.  Do crazy experiments and have fun.  Hope this helps.

[avoba]

Amazing! It worked out beautifully!!

 

I ended up using the HTML, and just had to tweak a little bit with the sty.top and sty.left as there were some issues with the screen width, but rather than that, it's perfect.

 

Thanks a lot!