Tooltips in UI Toolkit

What is the status on tooltips in UI Toolkit? I am using Unity 2019.4.0f1 and added a few tooltips by filling in the "Tooltip" field for an element in UI Builder. However, when I ran it, nothing happened when I moused over the element. Is other setup required, maybe styling perhaps? Or has it not yet been implemented?

 

I see the tooltip in UI Builder Preview mode, but when I go into the Unity Play mode or in a build, it does not show up.

 

Which UI Toolkit mechanisms would be involved in implementing a custom solution?

 

Hopefully some method that allows us to use that tooltip field, otherwise we have this tooltip field that is only useful for editor UI, which seems a little gross!

 

:hover and shadow child-elements with `display:none`

 

Any particular reason you recommend separate layer down the tree and put all tooltips objects (or even create it runtime every hover) instead of just having them pre-defined in the hierarchy and target with USS parent:hover > .tooltip for example?

 

I wrote some quick and dirty runtime tool tip code on on my website if your still interested

https://saig.zone/2020/09/21/uitoolkit-runtime-tool-tips-made-easy/

 

https://web.archive.org/web/2021032.../09/21/uitoolkit-runtime-tool-tips-made-easy/ mirror of mrSaigs page now that it's down, but here's the code included:

> We just have to write a new manipulator and add it to the elements who needs tool tips.

Code (CSharp):

1. using System;
2. using System.Collections;
3. using System.Collections.Generic;
4. using UnityEngine;
5. using UnityEngine.UIElements;
6.  
7. public class ToolTipManipulator : Manipulator
8. {
9.  
10.     private VisualElement element;
11.     public ToolTipManipulator()
12.     {
13.     }
14.  
15.     protected override void RegisterCallbacksOnTarget()
16.     {
17.         target.RegisterCallback<MouseEnterEvent>(MouseIn);
18.         target.RegisterCallback<MouseOutEvent>(MouseOut);
19.     }
20.  
21.     protected override void UnregisterCallbacksFromTarget()
22.     {
23.         target.UnregisterCallback<MouseEnterEvent>(MouseIn);
24.         target.UnregisterCallback<MouseOutEvent>(MouseOut);
25.     }
26.  
27.     private void MouseIn(MouseEnterEvent e)
28.     {
29.         if (element == null)
30.         {
31.             element = new VisualElement();
32.             element.style.backgroundColor = Color.blue;
33.             element.style.position = Position.Absolute;
34.             element.style.left = this.target.worldBound.center.x;
35.             element.style.top = this.target.worldBound.yMin;
36.             var label = new Label(this.target.tooltip);
37.             label.style.color = Color.white;
38.  
39.             element.Add(label);
40.             var root = (VisualElement)UiHelper.FindRootElement(this.target);
41.             root.Add(element);
42.            
43.         }
44.         element.style.visibility = Visibility.Visible;
45.         element.BringToFront();
46.     }
47.  
48.     private void MouseOut(MouseOutEvent e)
49.     {
50.         element.style.visibility = Visibility.Hidden;
51.     }
52. }

and

> Just copy this code into ToolTipManipulator.cs in your Unity project and following code to things who need to have a tool tip.

Code (CSharp):

1. //Optional if icons tooltip was not set before in UiBuilder ...
2. element.Q<VisualElement>("Icon").tooltip = "I am a tooltip";
3.  
4. element.Q<VisualElement>("Icon").AddManipulator(new ToolTipManipulator())

 

Thanks for sharing it, though, what is where is the UiHelper class? Was it a set of custom extension methods?


Edit -----------------------
Never mind about this, I was able to work out a solution. Minus the fact that on Linux, even this solution doesn't work right. Nothing seems to. : /

No matter what, tooltip end up in the top left corner of whatever window they are a part of. Annoying and extremely unuseful as you can't really even notice it.

 

Ye, those editor tooltips are very broken. Even UI Builder have them showing up in wrong spots. But I guess they will have that fixed soon enough.

I've update this repo with an example of how to do runtime tooltips in UI toolkit.
https://github.com/plyoung/UIElements

 

I cannot find the UiHelper class. Is that still a thing?
Is there another way to get the root element of the Manipulator's target?
Currently I'm sending the root through as a field in the constructor but that probably not the best way to do it.

 

This is my solution without add Manipulator for all visualelement:
The key point is use "panel.Pick(RuntimePanelUtils.ScreenToPanel(panel, screenPosition))" to get which visual element the mouse is hover on.

reference: https://docs.unity3d.com/2022.2/Documentation/Manual/UIE-faq-event-and-input-system.html

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.EventSystems;
3. using UnityEngine.UIElements;
4.  
5. public class ToolTipHelper : MonoBehaviour
6. {
7.     private VisualElement root;
8.     private Label label;
9.  
10.     void Start()
11.     {
12.         root = GetComponent<UIDocument>().rootVisualElement;
13.         label = root.Q<Label>();
14.     }
15.  
16.     void Update()
17.     {
18.         string tooltip = CurrentToolTip(root.panel);
19.         if (tooltip != "")
20.         {
21.             label.visible = true;
22.             label.text = tooltip;
23.             label.style.left = Input.mousePosition.x + 15;
24.             label.style.top = Screen.height - Input.mousePosition.y;
25.         }
26.         else
27.         {
28.             label.visible = false;
29.         }
30.     }
31.  
32.     string CurrentToolTip(IPanel panel)
33.     {
34.         // https://docs.unity3d.com/2022.2/Documentation/Manual/UIE-faq-event-and-input-system.html
35.  
36.         if (!EventSystem.current.IsPointerOverGameObject()) return "";
37.  
38.         var screenPosition = Input.mousePosition;
39.         screenPosition.y = Screen.height - screenPosition.y;
40.  
41.         VisualElement ve = panel.Pick(RuntimePanelUtils.ScreenToPanel(panel, screenPosition));
42.         return ve == null ? "" : ve.tooltip;
43.     }
44. }
45.