[Released] ProTips - Tooltip System for UGUI

ModelShark Studio is happy to announce ProTips, a tooltip system for UGUI!

Get it here: https://www.assetstore.unity3d.com/en/#!/content/44361





What is ProTips?
ProTips is a tooltip solution for Unity built on the new UGUI system introduced in Unity 4.6. ProTips supports both desktop/PC mouse hover events as well as press-and-hold events for touch devices. Tooltips can also be triggered from remote events such as button clicks or code, which is useful for making in-game interactive tutorials.

Try our Web Demo!
Our web demo illustrates all of the core features of ProTips. Try it out!


Documentation
With ProTips, you can create your own tooltip styles visually using the Unity Canvas and the templates provided in our package. We provide step-by-step documentation to get you started.


Purchase

 

We've created a Feature Overview video to show off the core features of ProTips:

 

Product looks great couple of questions

1.Does it support playmaker ?
2.Does it support scroll if the text is long
3.Can you add a button on the popup so if you move your mouse over the popup it display then move the mouse on the popup to review a second popup or have a button on that can be click

 

Hi geniraal,

Thanks for the questions, I'll try to answer them as best I can.

1. Does it support playmaker? PlayMaker actions are not currently included, but I could possibly create some if I knew the expected behavior of the actions. The way ProTips works is you simply drag the TooltipTrigger script onto whatever you want to trigger a tooltip popup. That's it for a normal tooltip. So, what kind of PlayMakers action are you looking for, in a scenario like that?

2. Does it support scroll if the text is long? Since the tooltips use the Canvas UI system, and that system supports scrolling overflow, then yes, you could make a tooltip that has long text with a scrollbar. Such a tooltip is not currently included with ProTips, but if you're interested, I could create one that does that and add it to the demo scene as an example and starting template.

3. Can you add a button on the popup so if you move your mouse over the popup it display then move the mouse on the popup to review a second popup or have a button on that can be click? Not sure I fully understand this question, but are you asking if you can have a tooltip within a tooltip? If so, then yes, I believe you could. Again, such a tooltip isn't currently included with ProTips, but I could probably put together an example and add it to the package if there's interest. There are two ways this could be done: A) The no-code method of adding a child tooltip trigger to an element on the parent tooltip. You would need to make sure the child tooltip uses a different template than the parent. B) The code method of dynamically adding a tooltip child to the tooltip parent at runtime.

 

Playmaker action examples sorry my english is not good

1.You can use playmaker to get data from like assets like simplesql and game data editor reason for this is to use different languages, so you can display tooltips from database.
2. All the settings can be set delay, fade where to popup depend where object example you create and object with playmaker FSM the game object is in the left top corner the you can tell the popup in playmaker bottomR
3.Can use playmaker to create conversation between two characters with the speech like popups but the popup need to be able to have choice for answer example First Character : How do you do ? Second Character : Well and you or nothing if you select well and you next character can respond
4.The asset will be perfect for game tutorials how to play the game popup get called by playmaker when the player click button on popup the next popup appear or popup appear and objective is complete the next popup display.

How my english is readable sorry about it :-/

I still did not buy your product but will when your money is a bit stronger I stay is South Africa and our currency very weak so $20 for me is a bit must now , but the price if perfect for the asset it is very cool. Playmaker will be a good add-on for you asset

Herman

 

Hey Herman,

I spent a couple hours trying to get PlayMaker to work with ProTips, but I ran into issues getting PlayMaker to work with the new Unity 4.6 GUI. It seems PlayMaker is in a transition phase as far as UGUI support, they are adding actions to their Unity 5 package but at present it's a bit complicated to get it all working:
(http://hutonggames.com/playmakerforum/index.php?topic=8114.0)

The process involved installing an Ecosystem Browser package, plus a UGUI Proxy events package along with a UGUI Proxy Actions package for those events, and once I did that and put a PlayMaker UGUI Pointer Events Proxy on my tooltip trigger element, it still complained that events were missing, even though my FSM on the container object had events. So I assume it's looking for some specific pointer events that I don't have and don't know where to find.

The process of getting PlayMaker to work with UGUI will probably be easier and make more sense once their team has integrated the UGUI events and actions into their Unity 5 package. At that time I may take another look at it, but until then ProTips won't include PlayMaker support.

 

Just checked out the demo, looks really nice, added to my wishlist. Just to confirm, the tooltips work during the game don't they? If I were to move my character using the arrow keys, I could still use the position the mouse over a moving object and the tooltips would appear? And it could be used with Ice Creature Control, to show the stats of the creature (health, hunger, etc)? Also, if there was a static object, like a tree, and the tooltip showed information about the tree, could this tooltip then be turned off so it wouldn't show up again? Thanks

 

Hi jonfinlay,
I'm not sure what you mean by "during the game". The tooltips do work at runtime, though. And yes, they will work on 3D objects such as creatures controlled by automated AI (like the Ice Creature Control asset). The creatures just need to have some type of collider on them so the TooltipTrigger script can add the proper OnPointerEnter and OnPointerExit commands to it.

Currently, ProTips doesn't have a "show only once" feature, but that's an excellent idea. I'm accumulating feature ideas for the next update, and I'll add that one to the list. I'm thinking such a tooltip would need to store the "already been seen" flag in PlayerPrefs, so even if the player stops the game and restarts it later, they still won't see the tooltip again. Does that sound like what you're envisioning?

Thanks for the feedback!

 

Yeah exactly that, many games have a "do not show again" tickbox, especially for tutorials. By during the game I meant not a static inventory screen, but while the game is playing, in 3D view using a 3d Camera, with stats like health updating in real time, but given your answer I assume this is possible.

 

The developers of ICE Creature Control have created an adapter for ProTips that allows you to add dynamic tooltips to creatures in your game. The adapter includes a customized editor for ICE that handles placing of the tooltip, allows you to select which fields you want to see in the tooltip and how they are formatted, and even lets you choose whether you want the tooltip to trigger on hover or on click.

They have even included a demo scene where you can click on kittens (or even the knight avatar), and it pauses their movement and gives you their customized popup information in a ProTips tooltip. Check out the demo here:

http://www.icecreaturecontrol.com/files/webplayer/ICECreatureProTipsAdapterDemo.html



Here's a screenshot of the editor:



The adapter can be downloaded for free here:
http://www.icecreaturecontrol.com/icecreatureprotipsadapter/

Thanks to the ICE developers for creating this excellent adapter!

 

i but this asset and i am not able to use it. It seems very simple i read quick start but when i add trigger to a button tooltip display %bodytext% in tooltip and not the string i put in editor. i try even your premade scenes but i have the same problem. i fell very stupid perhaps it is my fault, i am a unity newbie , may you help me????

 

Are you importing into an existing project? There may be some code in your existing project that is interfering. Start with making a new project and testing the demo scene there.

Are there any error messages in the console? There is a lot of debugging information added to the tool that may give us a clue about where the error lies.

 

His problem potentially could be that ProTips only works with scaled time. If you have the game paused (as many games do when in menu mode) the tooltip timers don't work. Showing tooltips with scaled time is kinda pointless.

That's an easy fix using Time.unscaledDeltaTime instead of deltaTime. Also need to change this line:
Graphics.CrossFadeAlpha(1f, fadeDuration, true);

However, it doesn't show up yet, doing some more testing.

 

We've submitted ProTips version 1.1 to the asset store. This version contains several big fixes to address issues with Screen Space Camera mode tooltips not showing up in the right places, the timescale issue duplexius mentioned above, as well as adding a new feature - attaching tooltips to 3D world space objects.



ProTips 1.1 changelog:
Fixed: Tooltips not appearing in the right place when Canvas render mode set to Screen Space - Camera.
Fixed: Tooltips are no longer affected by changes in Time.timeScale.
New Feature: Tooltips can now be attached to 3D world objects.
Misc: GUI Camera can now be specified on the TooltipManager. If not specified, Main.camera is used. This gives you more control when using multiple cameras for your scene.

 

Please help I have canvas everything got ui button on the sceen the popup work on the button. 3d object tooltips don't work please give some tutorial or something how to do tooltips on 3d world objects

 

Running Unity 5.3.1.p3

 

Hi geniraal,

I just put together a quick tutorial on using ProTips with 3D objects. Please take a look and see if it helps. Let us know if you have any issues!

(watch on YouTube for larger, clearer video)

 

Just bought this package and it looks awesome. Quick question though. I am trying to integrate it into an existing Unity application. Specifically, I have a top status bar with a bunch of icons and labels in it. I'd like to trigger a tooltip when the player hovers over either the icon or the label (don't care which). Unfortunately, I don't think I can get a GameObject reference to them as GUI.Label and GUI.DrawTexture return void.

Any ideas on how I might be able to pull this off? Thanks in advance!

 

Hi dogfacedesign,

I've been working on a way to do this today, and I think I'm getting close to a solution. The solution I'm attempting is to add a canvas to the scene on a separate camera, and have that camera rendered on top of the OnGUI elements. From there, you can add invisible RectTransforms as tooltip triggers and still use the underlying OnGUI buttons and whatnot.

It's a bit hacky, but I think it would get you what you need - you wouldn't have to convert your existing OnGUI UI, and you would still get the benefit of adding tooltips visually by using the Canvas with ProTips.

I need more time to work out the kinks in my proposed solution and make a video of the process, but just wanted to post an update so you didn't think we were ignoring your question.

 

Hey that's awesome, thanks!

 

I should add, since I am still learning Unity, I am open to learning the "right" / "new" way of doing things as well!

Cheers.

 

Well, as an update, I have it semi-working on my own, but not quite perfect yet. I basically had been fooling around with a similar approach to what you explained, though I didn't use a separate camera, just a separate canvas. But the tooltip keeps popping up in the middle of the screen (a canvas I guess under there), but not where my invisible button is in the top left corner of the screen ....

Guess I need to read up more on some newer ways of doing this rather than using DrawTexture, et al.

 

I also get some "mystery tooltip" on my new canvas ... just a small black perma-tooltip I guess that just says "Dynamic #2" in it. No idea where that is coming from lol.

 

So, I was able to get ProTips to work with a legacy OnGUI UI. The concept is fairly simple - just create a second camera to render only the Canvas UI layer and set your main camera (which renders OnGUI elements) to exclude the UI Layer. But the details of the process weren't exactly straight-forward, so I made a video that steps you through it.

It's definitely a workaround, and I would only do this if it wasn't reasonable to convert my existing OnGUI UI to the new Unity Canvas UI. But, it can be done.

Hey dogfacedesign,

The "right" way is subjective, but ProTips was designed to use the new Unity Canvas UI system. The old legacy OnGUI system was very difficult to use for anything complex, because creating the UI was a scripting process - not visual - unless you bought plugins that added that ability, and then you had to learn how to use those plugins. The new UI system is very visual, and so much easier to use once you get used to it, and you don't need 3rd party plugins to do basic things with it. Definitely worth learning. But sometimes, it doesn't make sense to convert a complex OnGUI UI you already have that works perfectly as-is, so in that case, this workaround might be useful.

This is probably coming from one of the demo scene scripts in ProTips. One of the features of ProTips is you can create tooltips dynamically through code, and in the demo scene I have a script that creates dynamic buttons with tooltips, and they are named "Dynamic #1" and "Dynamic #2". Probably just search your project for that script and delete it and it should go away.

 

Very helpful indeed! Thanks for taking the time to put this together!

Cheers.

 

How well does this work with TextMeshPro? Can I make my own template that uses TextMesh Pro text instead of unity's default text label object? Will this break any auto-expanding (moving/positioning) features that Pro Tips has?

 

Hi Enoch,

I also own TextMeshPro (great product, btw). ProTips will work well with TextMeshPro, but you have to do some find/replace in the code. So it doesn't work out-of-the box. Basically, you have to find and replace each instance of type Text with type TextMeshProUGUI. It's not a difficult task, but it is a little tedious. And once you're done with that, ProTips will no longer work with regular Text elements (no big deal if you always use TextMeshPro for your tooltips, but something to keep in mind).

I went through this exercise tonight, and here's a sample of the results:

No, it works fine. In the sample image above, the body text is getting wrapped automatically based on the min/max width of the tooltip, and the tooltip container is auto-expanded by the width of the text, just like a normal Text UI element. Just make sure and use the TextMeshProUGUI version that has a RectTransform component. RectTransforms are what ProTips uses for moving/positioning.



Hope that helps, let me know if you run into any issues.

 

Running into a strange issue, hoping maybe you guys have some ideas on this.

I have a horizonal toolbar at the top of my scene, with some sprites in it. These sprites are dynamically generated at runtime (based on a whole bunch of stuff that isn't worth getting into here lol). Nevertheless, I want to show a tooltip when the user hovers over each of them.

So I add the tooltip trigger to them, etc. But I get the dreaded message:

Code (csharp):

1. "MissingComponentException: There is no 'Collider' attached to the "resourceSprite1" game object, but a script is trying to access it. You probably need to add a Collider to the game object "resourceSprite1". Or your script needs to check if the component is attached before using it."

Ok, fine. Right, so I need to add a Collider. Which I do as soon as I create the object:

Code (csharp):

1.  
2. r.resourceObject = new GameObject ();
3. r.resourceObject.AddComponent<Collider> ();

Yet I still get the error message. I look in the inspector when it is running, and I don't see the Collider attached to the game object

Any ideas? lol ...

Cheers.

 

Ok, I got past this issue by adding a "BoxCollider2D" instead of "Collider" or "Collider2D", since those are base classes and shouldn't be used directly I think. Also had to modify TooltipExtensions.cs to query for BoxCollider2D rather than Collider.

Tooltip isn't working yet, sadly, but I'm getting closer anyway heheh.

 

Hmm, ok, I clearly don't have a full understanding of the architecture of ProTips and/or Unity as a whole lol.

I have my sprites created, and I add the following to each of them:

Code (csharp):

1.  
2. BoxCollider2D c = r.resourceObject.GetComponent<BoxCollider2D> ();
3. if (c != null) {
4.     c.enabled = true;
5.     c.size = new Vector2 (myWidth, myHeight);
6. }
7.  

Everything looks ok as far as I can tell in the inspector. I then call this code for each sprite gameobject to add the tooltip to them:

Code (csharp):

1.  
2. public static void peTooltip(GameObject onObject, string bodyText)
3. {
4.   TooltipTrigger tooltipTrigger = onObject.AddComponent<TooltipTrigger>();
5.   TooltipStyle tooltipStyle = Resources.Load<TooltipStyle>("MetroSimple");
6.   tooltipTrigger.tooltipStyle = tooltipStyle;
7.  
8.   // Set the tooltip text.
9.   tooltipTrigger.SetText("BodyText", bodyText);
10.  
11.   // Set some extra style properties on the tooltip
12.   tooltipTrigger.maxTextWidth = 250;
13.   tooltipTrigger.backgroundTint = Color.white;
14.   tooltipTrigger.tipPosition = TipPosition.BottomRightCorner;
15. }
16.  

But no love when I hover over the sprites. I'm almost certain I am overlooking a rather obvious step here!

Any suggestions? Thanks in advance!

EDIT: In looking at the inspector, I can see where it adds the "MetroSimple" hidden object, so it is definitely getting created. It just isn't actually working when I hover over one of the sprites.

EDIT: Hmm, it is also placing it in a canvas that I'd rather it not use. In looking at your code, I see where you try to guess which canvas to use. Would be awesome to be able to specify the canvas to use. In my case, I have several canvases.

EDIT: I did a test by changing your code to just return the canvas I wanted it the containers to be placed in, and still no love. It's as if the raycaster isn't working. I have a Graphics Raycaster component on my canvas, so I'm not sure what is going on

Cheers.

 

Hey dogfacedesign,

Can you upload your project somewhere and send me a link to it? There's a lot going on there...we could go back and forth trying to guess where the problem is. But if I could see your setup I could probably find the issue or offer an easier solution.

It sounds like you are creating a collection of sprites and putting box colliders around them at runtime. The Unity UI way of doing that would be creating a panel that is docked at the top of the screen with a Horizontal Layout group on it, and at runtime you would add your sprites as Image components. The Image objects are where you would attach your tooltip triggers.

As of version 1.1, you can specify on the Tooltip Manager which camera ProTips uses:

 

Thanks for the response. Normally I would zip up the project, but I'm under an NDA on this particular one.

That's basically the approach I am taking, though I don't have a horizontal layout group - shouldn't matter though, right?

Camera is set up ok it appears. I'll keep digging

 

Also, I am not adding them as Image components, but rather through Sprite.create. Does that matter?

 

Hey everyone,

I've been wrapping up the 1.2 version of ProTips - we'll be submitting that this week. Here are the highlights:

WebGL ready.

Several fonts were replaced, and miscellaneous other tweaks were done so the project would play well with WebGL out of the box. One nice benefit of this is we now have our demo scenes in WebGL...goodbye Web Player!​

Performance Increases.

Previously, even if you were careful to choose proper positioning of your tooltips so you didn't need overflow protection, the code that checked for canvas overflow was still being ran. Now, you can just un-check Overflow Protection on the Tooltip Manager and it'll save your project a little processing by skipping that code altogether. It's also useful to turn this off for debugging, if you're having issues getting your tooltips to show up correctly in a complex project.​

Also, if you now set the Fade Duration to 0 in the TooltipManager, you'll get a slight performance increase because the code will simply make the canvas renderers visible, instead of doing CrossFadeAlpha on each Image element of the tooltip.​

Angled Tooltips.

Finally figured out how to get tooltips to be angled to match a rotated canvas UI. On the TooltipManager, there is now a MatchRotationTo field that will accept any RectTransform. So if you rotate the entire main panel under your Canvas, you can drag that panel to the MatchRotationTo field and all tooltips will be rotated to match the main panel.​

Never Rotate this tooltip.

Angled tooltips are great, but you may have some tooltips you never want to rotate to match your UI. In that case, I've provided a new field on the TooltipTrigger script called Never Rotate that will keep those tooltips flat with the GUI canvas.
​

Specify which canvas to use.

If you have more than one canvas in your scene, you can now tell ProTips which one to use by assigning it to the Gui Canvas field on the TooltipManager. If you don't put anything here, ProTips will use the root canvas.
​

Check out our new WebGL demo for all the latest features from the previous 1.1 and upcoming 1.2 releases:

 

Hey dogfacedesign,

Using Sprite.Create() shouldn't matter, ProTips doesn't care how images are created, or even if there is one. But one thing the Image component does automatically is intercept raycast events from the mouse. If you're not using those, you'll need to make sure your mouse raycast event is being picked up by ProTips.

One way to tell is take a look at your Hierarchy while running. You mentioned that you see the MetroSimple tooltip getting created as a hidden object. When you mouse over a tooltip trigger that uses that tooltip, does it become active? If not, then your mouseover event isn't being picked up by ProTips. If it is going active, but you still can't see it on the screen, then it's a positioning/clipping issue. Check to make sure your camera has enough clipping plane depth to display the canvas. If that's good, then check the position of the tooltip and compare that to where you expect it to show up. That should give you some insight as to what might be off.

Looking at this closer, I suddenly realized what you meant, and I agree. So I added a "Gui Canvas" field to the TooltipManager (see my previous post above), and that's the canvas ProTips will use to render tooltips on. Thanks for the suggestion!

We'll be releasing the 1.2 version of ProTips sometime this week, but if you need it now send me your invoice # at modelsharkstudio@gmail.com and I'll get it to you. (This goes for anyone who needs it now.)

 

Thanks for the excellent response! I do believe this is the issue, since the hidden gameobject never activates when I mouse over. Now I just need to figure out how to make sure the mouse raycast event can get picked up lol. Sorry, still learning Unity

Cheers.

 

Ok, now this is weird as hell. I adjusted the size of my colliders, as I realized they were too small. Now I see the ProTips icon in the middle of my sprites lol.

 

Never mind, I see it is toggled on/off with Gizmos

 

So, I have the sprites in a canvas. The canvas has a Graphics Raycaster component on it. The canvas and the sprites are both in my highest-ordered layer and have high sorting orders.

I've fiddled with the options on the raycaster in the canvas to try and mask various things, but I can't seem to get it to work. I'll keep messing with it.

 

Ok, I think I may know what the problem is. I am using NGUI for some stuff .... and, well, don't think this is gonna work lolz.

 

Nice asset. The new canvas field option is great but I still have a small issue. I have 3 canvases and I need tooltips to work on all of them. However tooltips will only appear correctly (in front/on top) on the canvas that is specified in the canvas field of TooltipManager. Is there a way to set the canvas to use at run time? I tried it in my script but it appears that it will not work during run time.

 

Hi wmaass88,

I was able to reproduce the issue you're having by creating two canvases, A and B. I set canvas A to Screenspace Overlay and B to Screenpace Camera. I set A as the Gui Canvas in the TooltipManager. When I moused over a tooltip trigger on canvas A, it worked perfectly. But on canvas B, the tooltip wouldn't show in the right place (it was off the screen and not visible).

To solve the issue, I added two lines of code to the TooltipManager.cs file (see below). This does exactly what you suggested - it changes the GUI Canvas on the TooltipManager dynamically at runtime.



This worked for me. Please try it out in your project and let me know if you have any issues. Now that I think about it, this may be a better solution than setting the GUI Canvas on the TooltipManager, anyway.

 

Yep, that's the ticket! Works great zangad, thanks for taking the time to look at that.

 

Hi
I get this error:"Assets/ProTips/Demos (safe to delete)/Scripts/ButtonEventsForDemo.cs(2,19): error CS0234: The type or namespace name `SceneManagement' does not exist in the namespace `UnityEngine'. Are you missing an assembly reference?" Is this due to using an earlier version of Unity rather than 5.3.4. I am using 5.2.3p3.

 

Hi sicga123,

Yes, you're correct. Unity 5.3 added the SceneManager and apparently did away with Application.LoadLevel. To fix for previous versions of Unity, just change the SceneManager line back to Application.LoadLevel(0), etc. Or you can just comment that code out altogether, since it's just for the demo scene, so it can load the other scenes in on button clicks.

Thanks for bringing this to our attention.

 

ProTips 1.2.1 has been submitted to the asset store. Here are the highlights:

Easier GUI Canvas handling. You no longer need to specify the GUI Canvas field on the TooltipManager. It now assigns the active tooltip trigger's parent canvas as the GUI Canvas to render tooltips on at runtime. (If the object has no parent canvas, then the root canvas is used.)

New Tooltip positions. Added 8 new tooltip positions: TopMiddle, MouseTopMiddle, BottomMiddle, MouseBottomMiddle, RightMiddle, MouseRightMiddle, LeftMiddle, and MouseLeftMiddle. These cause the tooltip to be centered on the trigger object (or mouse position).
+ Added overflow protection logic for the new "Middle" tooltip positions.
+ Added a "no pointer" version of all the tooltip styles that used pointers. This is useful for the new "Middle" tooltip positions.

Various Bug Fixes and Improvements.
+ Added extra null reference checks when deactivating or deselecting tooltips, to avoid null reference exceptions when the scene is stopped suddenly.
+ Bug: When overflow protection flips a tooltip, it will now remember to use the mouse position for placement if the tooltip was set to one of the "mouse" positions.
+ Editor Bug: On ToolTipTriggerEditor, "Is Blocking" is now correctly grouped under "Stays Open" instead of "Never Rotate".

The WebGL demo has also been updated to 1.2.1, so you can try out the latest version here:
http://www.modelshark.com/protipswebgl/index.html

 

I was excited with the capabilities of your asset, and almost purchased it today. During the purchase process, a license agreement came up. I'm an indie developer, and I just can't commit to the notice requirements of your license. Were I an existing business with someone to keep track of such things, I would consider it. I own many assets from Unity Store, and to the best of my recollection, yours is the first that requests me to commit to additional requirements. If I checked the box and promised to comply, it would be an honest intention, but not the required commitment. I think you should consult an attorney, and ask them if this license is necessary. Or consider a less restrictive software license. There are probably more indie friendly licenses in existence.

 

Hi wood333,

Thanks for bringing this to our attention, we didn't intentionally add a license agreement to our asset. We were surprised just now to see this on our asset page:



After some digging, we found the reason this is showing is because one of the free Google fonts we included in our demo, Arimo, has a license file with it named LICENSE.txt, and Unity apparently scans for text files with that name and adds it as a secondary license agreement to the product page.



So no worries, there are no added legal agreements to ProTips, just the standard Unity license. This was simply a mistake on our part of not realizing that the license.txt file for the free font would get picked up and displayed by Unity. We're renaming this file and resubmitting the asset so it won't be display anymore.

 

Zangad said:

That's good news. Be careful. That so called "free" Google font may be subject to the license, meaning you are required to include it with your notices. I dislike these so called "free licenses." No license is "free." Only works in the public domain are truly unencumbered.

As soon as the new version clears, I will be purchasing.

 

Update: The 1.2.1 version of ProTips is out on the asset store now.