[Released] ProTips - Tooltip System for UGUI

Hi @Derptastic,

Thanks for the screenshots. I played around with our demo scene (#3, the World Object one) to see if I could reproduce the camera angle issue, but I wasn't able to reproduce it on my end. One question - is the canvas that's rendering your tooltips (the GuiCanvas in TooltipManager at runtime) set to ScreenSpace-Overlay, ScreenSpace-Camera, or ScreenSpace-World?

One thing I would check is to see if the tooltip is visible somewhere in the scene, but maybe something is covering it up, or maybe its position is wrong and it's off the screen. First, set your tooltip to Stays Open (a checkbox on the TooltipTrigger script). Then, run your scene and hover over the tooltip trigger. Now, switch to Scene view and locate your tooltip in the heirarchy under the Tooltip Container object. The tooltip will be enabled like in the screenshot below if it is getting triggered correctly.



Click in the scene window and press 'F' to quickly navigate to the currently selected game object (the tooltip in this case). Check to see if the tooltip is there and enabled/visible. If so, what is it's location? Is it off the screen or behind something where the camera can't render it?

If it's positioned wrong, one thing to turn off is the Canvas Overflow Protection on the TooltipManager. This will simplify the troubleshooting because ProTips will skip the step where it makes a second pass to flip the position of the tooltip if it's determined to be off the screen.

From this point, we should know (A) whether the tooltip was triggered properly and is visible in the scene but not in the game for some reason (like it's underneath/behind an object or it's positioned off the screen) or (B) the tooltip was not triggered properly (it is disabled under the Tooltip Container) for some reason. If (B) is found to be the case, I would put a breakpoint in the OnPointerEnter method of the TooltipTrigger.cs script and make sure it's firing when the camera angle is rotated. It could be that there's something blocking raycasts to your 3D object - maybe the camera clipping is too close?

Anyway, I hope this helps. If you're still stuck after these steps and nothing jumps out as the culprit, feel free to send us a link to your project uploaded to OneDrive/DropBox/etc (send to modelsharkstudio@gmail.com) and we'll take a look at it.

 

Hey, @zangad, thank you for the quick response!

So in that order - My canvas is Screen Space - Overlay.
As for the tooltip, it seems to be a case of B) Not showing up at all. And apparently, for 3D objects it's not OnPointerEnter, but OnMouseOver event that gets triggered. And here's the clutch, when at a certain angle, it doesn't get triggered at all.

In that case, however, it's my problem, as it's a Unity event, and not a case of the tooltips misfiring, therefore I need to debug that on my end (when the event actually gets called, everything works fine). Thanks for the help!

As a complete side note, and off topic of my question,

Spoiler

and really my one grief with the asset - My use case is that the game is multiplayer and my Player's canvas spawns with him, rather than always being in the scene (on account of me not wanting the server to have one).
This has forced me to make several small but crucial modifications to both TooltipTrigger and TooltipManager, to ensure that I'm calling Initialize manually when ready (and pass the correct canvas and camera), rather than the automatic one, which makes a lot of assumption. Additionally to make sure that the code properly waits for initialization to happen, because TooltipTrigger's Update for example, assumes everything is ready from the get go.

Since I have all the source code, I've made it work for me, but in general, I would've loved if TooltipManager has a built-in option to be manually initialized (and disable the automatic) and for the TooltipTriggers to take that into account, since now I have to make sure I go through all changes when updating the asset, to make sure mine stay in.

 

Ah - the OnMouseOver() event, not OnPointerEnter() - sorry about that, I was trying to recall it from memory, I should have looked it up. But I'm glad to hear you are closer to finding the root cause of the issue.

And thanks for the feedback. I agree that making the TooltipManager manually initialized (ie, not assuming it's always in the scene and ready to go) would be an improvement for ProTips. It would provide extra control and make it work for more types of games, but at the cost of another setup step.

It's always a challenge to make an asset that "just works" out-of-the-box for every customer, but also still allows for extensive customization for each unique use-case. ProTips probably leans more towards "just works", but as you mentioned, that comes at the cost of making a lot of assumptions which just gets in the way when you have a more complex use-case.

So I've put your suggestion on our to-do list:
* TODO: Look at changing TooltipManager so it is manually initialized, and change the code so TooltipTriggers don't expect that everything is ready all the time.

The trick will be figuring out how to do this without sacrificing the easy initial "getting started" setup instructions. Thanks again for your feedback!

 

Good evening, I have been attempting to use this in VR, but I assume for protips to work it needs to attach to a canvas, yes? so if I wanted tips to pop up on ingame objects in VR each one would need a canvas attached for the tips to work?

Thank you for your help.

 

Hi @PRfsJay

Yes, a Canvas component is needed for tooltips to work, since the tooltips are RectTransforms.

 

I'm using ProTips v1.7.6 with Unity 2021.3.4f1. I've attached tooltips to 3D objects that are added to an inventory when the mouse pointer is close to the 3D objects and then the F key is pressed. The good news is that the tooltips display just fine, and the 3D object disappears and is added to the inventory at the F keystroke, but the tooltip remains onscreen. Do you have a suggestion as to how the tooltip disappears when the 3d object does? Thank you-Jim

 

Hi @JimInNH,

I was able to reproduce the issue in our demo scene. Thanks for bringing it to our attention. Can you please add this function to your TooltipTrigger.cs script and see if it fixes the issue?

Add this to \Assets\ProTips\Scripts\Behaviors\TooltipTrigger.cs:

Code (CSharp):

1. private void OnDisable()
2. {
3.     Tooltip?.Deactivate();
4. }

What this does is, if the tooltip trigger object is ever disabled or destroyed, it immediately deactivates the tooltip tied to it. This fix will be in future versions of ProTips.

Please let me know if it doesn't solve the issue for you!

 

Sorry for the delayed response - yes - it absolutely works. Thank you for the help.
Jim

 

Greetings! I've had good luck with ProTips until I started trying to use it within prefabs. I have stat modifiers that I create dynamically from a prefab. Each one of them has a tooltiptrigger. When it creates them the first time all works fine. But when in my game I shift to another character and I have to destroy and the re-create the prefabs again I get MissingReference Exceptions. It is like the tooltiptrigger is tied up with instances of the manager and so when it is destroyed it isn't really destroyed. I've tried setting tooltip to null before destroying the component but it is like wack-a-mole.

Can you give me a process for best how to use Protips within prefabs that are initalized and destroyed?

 

I tried to edit my previous post but this forum is a bit buggy in chrome I think.

So I ended up solving this by just using a simple pooling design so I never have to destroy the prefabs.

Instead I just keep a list of gameobjects as I instantiate them and when clearing them instead of using destroy I simply set my data object on them to null and set active to false.

I'd still like to know of how I could just destroy the gameobjects though as it makes it easier when prototyping not to have to setup a pooling system. I also could see a situation where I really would want to destroy them and not have them hanging around.

 

Hi @WizardGameDev,

I'm glad you were able to find a workaround to the issue.

I tried to reproduce the issue in my project, but wasn't able to. I setup a simple script that creates tooltip triggers from a prefab, and it also destroys all the tooltip triggers under the gameobject it created them under.

Here's a video of me creating and destroying TooltipTriggers from the buttons, and below is the script for the Add/Remove buttons.

Code (CSharp):

1. public void AddTooltipFromPrefab()
2. {
3.     // Load the button prefab from Resources.
4.     GameObject buttonPrefab = Resources.Load<GameObject>("DynamicObjWithTooltip");
5.     if (buttonPrefab != null)
6.     {
7.         // Assuming the prefab exists, instantiate the button and set its parent.
8.         Instantiate(buttonPrefab, tooltipTriggerButtons.transform, false);
9.     }
10. }
11.  
12. public void DeleteTooltipFromPrefab()
13. {
14.     TooltipTrigger[] triggers = tooltipTriggerButtons.GetComponentsInChildren<TooltipTrigger>();
15.     foreach (TooltipTrigger trigger in triggers)
16.     {
17.         Destroy(trigger.gameObject);
18.     }
19. }

Since I can't seem to get the error to happen on my end, I'm thinking there must be something more to it. Is there perhaps a Canvas on your prefabs, that might cause the tooltip container object to attach itself under that canvas, and then it's getting deleted along with the prefab, or something like that? I'd probably need to see what all is included in the prefab, or know where the error is happening (the specific error and line number). Or if you could post the code you're using to instantiate and destroy the prefabs, that might help.

Otherwise, please feel free to zip up your project and upload it to a cloud hosting service (like DropBox, Google Drive, OneDrive, etc) and send a link to modelsharkstudio@gmail.com, and I'll take a look at it and see if I can figure out what's going on. Or if there's some other way you can think of that I can reproduce the issue on my end (in our demo scene, for instance) that would help.

 

Many thanks for the quick reply. I'm not sure why mine was breaking as I was doing exactly the same code as the DeleteTooltipFromPrefab you provided earlier. There will be other places in my project were I will need to initialize and delete the triggers so I'll try it again with that method. I'll check out the demo scene as well.

 

Hello,

Is this asset still being supported?
Latest update was a year ago, and the pdf documentation link does not work -> https://modelshark.com/Content/ProTips User Guide.pdf

 

Hi @zKici,

Thanks for bringing the PDF issue to our attention. It turns out our whole website (www.modelshark.com) was down because of an SSL certificate issue. I re-installed the certificate and the PDF (and website) seem to be working fine now.

Yes, ProTips is still being supported. We get multiple requests per week for support, most of which are handled through direct emails to modelsharkstudio@gmail.com. We are also very active on this forum and our ModelShark YouTube channel, so don't hesitate to reach out to us if you need assistance.

Regarding updates, we only update ProTips when there are breaking bugs or when we have accumulated significant changes to make a large update. ProTips is fairly mature at this point and not much has changed with the way Unity UI and the Canvas works in the last year.

 

Hi there, just purchased your asset and liking it so far.
I appreciate you don't appear to provide this functionality out of the box but was wondering if you had any tips for the most sensible way to go about extending your code to achieve the following:

I want mullti-level tooltips on top of tooltips - so e.g. player mouse hovers UI image, gets a tooltip containing some info, which locks in place (say on middlemouse button click while tooltip 1 is displaying), allowing player to freely mouseover TMPro text links in tooltip 1, which themselves display e.g. tooltip2 and tooltip 3, (potentially containing even more TMP link text and leading to tooltips 4, 5 etc. (although for most of my purposes I will need at most one level of children) While at any stage, another mouse middle button input would unlock and resume fade behaviour for the original parent tooltip, and all the children.

I want to maintain compatibility with the asset as far as possible so I've tried altering your demo TMPro links class implementing OnPointerClick like this, while passing in links with rich texts to the text of the scriptable object Tooltipdata so that the original data for tooltip 1 which is passed looks like this:
This is a <color=green><link="primary">primary</link></color> link.
This is another <color=orange><link="primarytwo">anotherprimary</link></color> one.

then in the database the text for the primarytwo link is:
which itself contains a <link="secondary"> secondary link</link>

Code (CSharp):

1.  
2.         public void OnPointerClick(PointerEventData eventData)
3.         {
4.  
5.             if (eventData.button == PointerEventData.InputButton.Middle)
6.             {
7.                 bool isHoveringOver = TMP_TextUtilities.IsIntersectingRectTransform(pTextMeshPro.rectTransform, Input.mousePosition, pCamera);
8.                 bool isOverLink = TMP_TextUtilities.FindIntersectingLink(pTextMeshPro, Input.mousePosition, pCamera) != -1;
9.                 if (isHoveringOver && !isOverLink && tooltipTrigger.Tooltip != null)
10.                 {
11.  
12.                     tooltipTrigger.Tooltip.IsBlocking = false;
13.                     tooltipTrigger.Tooltip.StaysOpen = true;
14.                     GameObject go = new GameObject("childtooltipGO");
15.                     go.transform.parent = tooltipTrigger.gameObject.transform;
16.                     TooltipTrigger tooltiptrigger2 = go.AddComponent<TooltipTrigger>();
17.                     tooltiptrigger2.tooltipStyle = defaultTooltipStyle;
18.  
19.                     // Set some extra style properties on the tooltip
20.                     tooltiptrigger2.minTextWidth = 280;
21.                     tooltiptrigger2.maxTextWidth = 400;
22.                     tooltiptrigger2.backgroundTint = Color.white;
23.                     tooltiptrigger2.tipPosition = TipPosition.MouseTopRightCorner;
24.                     go.SetActive(true);
25.  
26.                     // This tooltip will be activated through code, so turn off the default OnMouseHover behavior.
27.                     tooltiptrigger2.isRemotelyActivated = true;
28.  
29.                     LinkData linkData = GetLinkData();
30.                     List<ToolTipData> ToolTipList = Vault.GetAll<ToolTipData>();
31.                     for (int i = 0; i < ToolTipList.Count; i++)
32.                     {
33.                         if (linkData.Id == ToolTipList[i].Title)
34.                         {
35.                             ToolTipData toolTip = ToolTipList[i];
36.                             tooltiptrigger2.SetText("BodyText", toolTip.Description);
37.                             tooltiptrigger2.StartHover();
38.                         }
39.                     }
40.                 }
41.  
42.  
43.  
44.  
45.             }
46.         }
47. )

At the back end I have a list of Tooltip textdata in a scriptable object database and I dont have an issue connecting the data to the tooltips, but its in between I am wondering what is the best way to proceed - particularly as it seems the asset currently assumes there will only be one tooltip active at any one time - any ideas? The code above does not produce a second tooltip on top of the first. It will lock the first tooltip but not produce children. Any help would be appreciated

Thanks

 

Hi @johnclearybl,

I think I can help get you over this hump, the issue of multiple tooltips not showing at the same time.

First off, there is a section of code in TooltipManager.cs that prevents multiple tooltips from being shown at the same time. You'll want to comment out that code so you can display more than one at a time.



That alone won't fix the problem, because ProTips is designed to only instantiate one of each Tooltip Style and re-use that one instance over and over. So to get around that, you can just make copies of your Tooltip Style. So for example, if you want 4 of the same tooltip style to be visible at once, just copy that tooltip style 4 times and give it different names:



And lastly, you just need to check "Stays Open" on your tooltip triggers, which you're already doing in your code. So you should be able to have multiple tooltips open at the same time after that. I wrote a quick script to create 4 dynamic tooltip triggers with an Add button. Each one points to a different copy of the TooltipStyle (above). Here's the results:



Hopefully this gets you past that hurdle. If you can't get it working, let me know and I can send you the project I worked on for the illustration above.

 

Thats great, thanks so much for the quick response. At work now but will dig into this tonight, if I can't get the hang of it I will come back to you. 5 star review coming your way on the asset store too!

 

Hey, just a couple of more questions. And sorry I dint have the project on my laptop and wont get in front of it until this evening so may be misremembering how your classes work.

Did you need to do anything special, e.g. with the sort order or layer of the dynamic tooltips in your example to ensure the latest tooltip displays on top of the previous one? Like, if you were to click the dynamic tooltip buttons right to left instead of left to right would the last one instantiated display on top or underneath the others?



At runtime, plan is -as follows to get the child links/new tooltips to come themselves from TMPro links - if any of this doesnt make sense to you, or if you have any suggestions would really appreciate it.

Pseudo:

,OnPointerClick:
if trigger1.tooltip isactive and showing
OnMiddlebuttonclick call MakeTrigger2

MakeTrigger2
set trigger1 or parent to staysopen.
instantiate a new gameobject and add a tooltiptrigger to it
make the new gameobject for trigger2 a child of the gameobject holding trigger1,
.(maybe adding a horizontal layout group with child force expand to ensure that the newGO holding trigger2 is at least as big as trigger1)OR double the offset, override the display location?


OnHoverTrigger2
if
trigger1.tooltip is active, trigger2.tooltip isnotactive, and TMP TextUtils intersecting link is true
{
Call TMP TextUtils Link intersectig and match with key in SO database
Set text trigger2.tooltip to text from database
begin Hover() trigger2
}
otherwise return

OnPointerExit
{
set trigger1 to deactivate
Maybe find all active trigger tooltips in the scene and call deactivate on them?
End Hover trigger2
}

 

Hey @johnclearybl,

You can control the sort order of the multiple open tooltips by adding the following line of code to the Tooltip Manager, in the Show() method. This will force the last tooltip triggered to be the one on top.

TooltipManager.cs => Show() method


Hope that helps!

 

Hi Zangad,

Does this asset only work with Buttons? I have some UI elements that are just text with the option next to them in a settings menu (toggle, dropdown, slider etc) but I would like to have the pop-up whenever the user hovers over the text UI element. Is this possible?

 

Hi @EpicMcDude,

ProTips works with more than buttons. As long as your canvas has a GraphicsRaycaster on it (it does by default), then anything under the canvas that blocks raycasts can be used as a tooltip trigger.

For example, text and TextMeshPro elements block raycats, as well as images, including things like canvas panels and control elements such as buttons/toggles/etc. So, almost anything on the canvas can be used as a tooltip trigger.

 

Hi, I want to ask regarding the tooltip.

How can I design my tooltip like in this video? so when I point to the different object it will popup different information in the tooltip

 

Hi @nurhidayahhamri

The data that populates the tooltip in that video comes from the EquipmentItem.cs script that is on the tooltip trigger object.

If you look at the 2. ProTips Demo scene and click on the armor in Scene View, you will see the Equipment Item script (see image below).



The data for your tooltips may come from someplace different, like a database or a JSON file, but regardless of where the data comes from, there are really just two things you need to do to set the text on a tooltip dynamically:
(1) Get a reference to the tooltip trigger you are interested in setting text on, and
(2) Set the text for that tooltip trigger based on your data.

If you look at the EquipmentItem.cs script, most of the work is done in these few lines of code:

(1) Get a reference to the tooltip trigger on the current game object
TooltipTrigger = gameObject.GetComponent<TooltipTrigger>();

(2) Set the text on the tooltip trigger based on the data in the EquipmentItem script
TooltipTrigger.SetText("TitleText", String.Format("{0} ({1})", itemName, itemType));
TooltipTrigger.SetText("Stats", GetStatsText(this));
TooltipTrigger.SetImage("ItemImage", Image.sprite);
... and so on

So really how you accomplish this depends on where the data for your tooltip comes from. If you can give me some more details about your project and where your tooltip data is coming from, I can try to provide more specific assistance. I hope this helps!

 

Hi @zangad , Thank you for the explanation.

I want to display the image using a tooltip. So when I point to the 3d object, it will display the image that I already created. Right now I already set the sprite in the tooltip but I have an error in the function **HideToolTip**. In this function, I want to hide the image when the arrow/cursor is away from the object.

**------TooltipManager Script-----**
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class TooltipManager : MonoBehaviour
{
public static TooltipManager _instance;

public Image imageComponent;

//public SpriteRenderer imageComponent;
// SpriteRenderer spriteRenderer = gameObject.GetComponent<SpriteRenderer>();

private void Awake()
{
if (_instance != null && _instance != this)
{
Destroy(this.gameObject);
}
else
{
_instance = this;
}
}

// Start is called before the first frame update
void Start()
{
Cursor.visible = true;
gameObject.SetActive(false);
}

// Update is called once per frame
void Update()
{
transform.position = Input.mousePosition;
}

public void SetAndShowToolTip(Sprite Image)
{
gameObject.SetActive(true);
imageComponent.sprite = Image;
}

public void HideToolTip()
{
gameObject.SetActive(false);
imageComponent.sprite = Sprite.Destroy();
}

}
Right now, I have an error in **HideToolTip** function.
**------Tooltip Script-----**
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Tooltip : MonoBehaviour
{
public Sprite Image;

private void OnMouseEnter()
{
TooltipManager._instance.SetAndShowToolTip(Image);
}

private void OnMouseExit()
{
TooltipManager._instance.HideToolTip();
}
}

 

You mentioned you have an error in the HideToolTip function. What is the error you're getting?

 

How to deal a Canvas on the prefabs? A case is the canvas on the Dropdown component. It's very common case.

 

Hi there,

I'm not sure I understand the question, but hopefully I can help. There is an example of how to use ProTips with a dropdown component in the "2. ProTips Demo" scene:



Please let me know if this isn't what you're asking about.

 

Hi @zangad
we already talked about idea I have in DestroyIt thread but here seems the better place to continue it.
So my suggestion is that it would be great to have ProTips functionality for 3d objects (as in demo 3. 3D world object demo) not only based on cursor of mouse as is now but also i.e. if cursor is disabled and/or if additional "switch variable" is enabled in TooltipManager.
Detection would be active for center of screen (maybe with additional Vector2 shift correction if in our game "center of screen" is not the same place as "crosshair" or "crosshair" is "floating" when i.e. steering the ship, seems like "Vector2 shift" would have to be also added in TooltipManager as public).
I do not know how your asset works inside, but to me it looks like in place where you detect mouse position, you needed just add in some cases (when mouse cursor is disabled and/or when check in TooltipManager is enabled) switching to "center of screen + Vector2 shift" and then work as now, so check if any 3d object with ProTip is targeted (probably raycasted).

What do you think about this idea?
I think that this alternative way of detection when Tip should be triggered would add a lot of flexibillity to your asset. ProTips could be used as kind of functionality for any statuses in fps games as i.e. in no mans sky

 

Hi @dulinieck,

Thanks for posting your question here. Like I mentioned over on the DestroyIt thread, there is a demo scene in ProTips "10. Tooltip Position Override". In that demo, it demonstrates how to have the tooltip follow a transform or a vector. You would just assign your tooltip to follow the crosshair transform - you don't need to assign it to a mouse pointer.

You just check "Override Position" on the TooltipTrigger component, and select what you want the tooltip to attach itself to.



So in the example above, the tooltip will appear anchored at vector X:1011, Y:508, Z:0. And this value can be assigned at runtime, so you can do some simple screen vector math (divide X and Y by 2) to find out what the center of the screen is, then plug that value into the TooltipTrigger component, and it will anchor the tooltip to that vector. Hope that helps!

 

I understand how to use override to make i.e. "common/constat position" for tooltips.
But I think you did not understand my question or I do not understand how your asset works.
The question is how your asset works to detect that tooltip should be at all displayed?
I understand it is handled by "TooltipManager", and it checks cursor position, but what if there is no cursor?
The game runs in FPP mode and there is no cursor - there is only crosshair in the middle of screen, and 3d objects with assigned TooltipTrigger.

 

Hi @dulinieck

The way ProTips knows that a tooltip should be displayed is either through mouse events or invoked directly through code using the Popup() function. Both of these methods are handled in the TooltipTrigger component. So, a cursor is not necessary for displaying a tooltip.

 

so I should invoke Popup() from script TooltipTrigger when I decide to show popup for 3d object - right?

 

Hello,

I'm using protips in a card game and used it to add tooltips at different places of my game without any issues.

But when I tried to add tooltips to the in-game card objects, the positions where completly wrong.

The problems seems to comes from the fact that I change the position of world space canvases at runtime.

In your world space canvas test scene, when I change the tip position to right middle, start the game, then manually change the position and rotation of the world space canvas (the canvas itself, not the button inside the canvas), the same problem happens.

In the scene view, the tooltips appears at the right world space position. But in the game view, its position in the overlay is wrong.



Can you fix this bug? Or explain me how to workaround this problem?

I tried displaying the tooltips in the cards canvases. It fixes the position problems. But swithching the manager's canvas at runtime doesn't seems to be fully supported and causes new issues.

 

@zangad
I experimented more with your world space canvas test scene.

Actually, it doesn't works at all. The only reason it seems to work is because your world space canvas has the same coordinate as your orverlay canvas. As soon as the position of the world space canvas changes, the tooltips are not displayed at the correct position.

Weirdly, when using a camera space canvas instead of an overlay, the tooltip position is correct (after adjusting the plane distance to get the right size). But then, the other tooltips don't work anymore (those with triggers in another overlay canvas).

 

Hi @Theta_ ,

I'm trying to reproduce the issue you're having, but maybe I'm not doing it exactly the same? It seems to work fine for me to change the transform of the World Space canvas at runtime and the tooltip seems to be in the right position. I recorded a video of what I did, so you can compare.

In this video, I first remove the Overlay Canvas and change the Tooltip Manager so it is set to use the World Space canvas exclusively for tooltips. Then, I change the tooltip position on the button to Left Middle. Then I run the scene and adjust the rotation and position of the canvas.

 

Thank you for answering.

Yesterday I eventually managed to get what I wanted by switching the manager's canvas to the one containing the trigger. It's similar to what you did in your video.

At first with this solution I had some problem with tooltips that got "stuck" and were not moved after changing the manager's canvas. Disabling "never rotate" fixed it. But in your video you didn't disabled it. I'm not sure why I got this problem and you don't. Anyway I got it working to this is not a big deal.

The major problem here is the demo scene were the trigger is in a worldspace canvas and the tooltips in an overlay canvas. It does seems to work in your demo but that's because both canvases are at the same position. When they are not the tooltips are not displayed at the correct position.

Video here:

(link expires in 48h)