avoba

Show text label when hover

Recommended Posts

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

Screen Shot 2017-04-08 at 6.35.56 PM.jpg

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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! :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.