Researcher in Virtual Reality and Scientific visualization with a secret, uncontrollable passion for gamedev.

  • View media
  • View media
  • View media
  • View media
  • View media
  • View media
RSS My Blogs

Here we go, it took some pain as we only begun using uGUI less than a couple of weeks ago, but we managed to develop a functional tooltips system. It might still be improved and polished and the code is partially dirty, but it works well, it shows no performance issues of any kind.

No more talking and straight to how we did it, as we saw several people asking about something similar in several other places.

Video Example Tooltip System

We have a tooltip object in the canvas, consisting of a panel with the background image and a child text element. to the panel we attached our tooltip script.

first of all add on top of your scripts

using UnityEngine.UI;
using UnityEngine.Events;
using UnityEngine.EventSystems;


When we are building the interfaces, we attach an EventTrigger to the object from the inspector, graphically, then from the code initializing the button we add triggers with a callback to the objects we need to get the data from in the following way :

public ToolTip ttp; //initialize this by getting the script attached to the tooltip

foreach(RectTransform elem in childs){
	if(elem.name=="Button"){
		portraits.Add(elem.GetComponent<Image>());
                EventTrigger trig = elem.gameObject.GetComponent<EventTrigger>();
		AddPointerEnterTrigger(trig,OnPointerEnter,EventTriggerType.PointerEnter);
		AddEventTrigger(trig,OnPointerExit,EventTriggerType.PointerExit);
	}

and the functions are

private void AddPointerEnterTrigger(EventTrigger evTrig, UnityAction<BaseEventData> action, EventTriggerType triggerType){
	EventTrigger.TriggerEvent trigger = new EventTrigger.TriggerEvent();
	AddEventTrigger(evTrig,d => OnPointerEnter(d, evTrig.gameObject),EventTriggerType.PointerEnter);
	EventTrigger.Entry entry = new EventTrigger.Entry() { callback = trigger, eventID = triggerType };
	evTrig.delegates.Add(entry);
}

private void AddEventTrigger(EventTrigger evTrig, UnityAction action, EventTriggerType triggerType){
	EventTrigger.TriggerEvent trigger = new EventTrigger.TriggerEvent();
	trigger.AddListener((eventData) => action()); 
	EventTrigger.Entry entry = new EventTrigger.Entry() { callback = trigger, eventID = triggerType };
	evTrig.delegates.Add(entry);
}

private void AddEventTrigger(EventTrigger evTrig, UnityAction<BaseEventData> action, EventTriggerType triggerType){
EventTrigger.TriggerEvent trigger = new EventTrigger.TriggerEvent();
trigger.AddListener((eventData) => action(eventData)); 
EventTrigger.Entry entry = new EventTrigger.Entry() { callback = trigger, eventID = triggerType };
evTrig.delegates.Add(entry);
}
private void OnPointerEnter(BaseEventData dataObject, GameObject hovered){ if(hovered != null){ ttp.SetTooltip(hovered.name); } } private void OnPointerExit(){ ttp.HideTooltip(); }

and then this is the script attached to the tooltip object. (this is the version for the gui canvas on screen overlay mode), it contains already a rough function so that the tooltip never goes offscreen if the mouse is close to the edge, and resizes itself (on a single line only at the moment) according to the length of the text

//text of the tooltip
    Text text;
 
    //if the tooltip is inside a UI element
    bool inside;
   
    bool xShifted = false;
    bool yShifted = false;
 
    int textLength;
 
    float width;
    float height;
 
    int screenWidth;
    int screenHeight;
 
    float canvasWidth;
    float canvasHeight;
 
    float yShift;
    float xShift;
 
    int canvasMode;
 
public void SetTooltip(string ttext){
        //ScreenSpaceOverlay Tooltip
        if(GUIMode==RenderMode.ScreenSpaceOverlay){
            //set the text and fit the tooltip panel to the text size
            text.text=ttext;
 
            this.transform.GetComponent<RectTransform>().sizeDelta = new Vector2(text.preferredWidth+60f,text.preferredHeight+20f);
            width = this.transform.GetComponent<RectTransform>().sizeDelta[0];
            height = this.transform.GetComponent<RectTransform>().sizeDelta[1];
 
            Vector3 newPos = Input.mousePosition-new Vector3(xShift,yShift,0f);
            //check and solve problems for the tooltip that goes out of the screen on the horizontal axis
            float val;
            val=(newPos.x-(width/2));
            if(val<=0){
                newPos.x+=(-val);
            }
            val=(newPos.x+(width/2));
            if(val>screenWidth){
                newPos.x-=(val-screenWidth);
            }
            //check and solve problems for the tooltip that goes out of the screen on the vertical axis
            val=(screenHeight-newPos.y-(height/2));
            if( val<=0 &amp;&amp; !yShifted){
                yShift=(-yShift+25f);
                newPos.y+=yShift*2;
                yShifted=true;
            }
            this.transform.position=newPos;
            this.gameObject.SetActive(true);
 
            inside=true;
        //WorldSpace Tooltip
        }
}
 
public void HideTooltip(){
        //ScreenSpaceOverlay Tooltip
        if(GUIMode==RenderMode.ScreenSpaceOverlay){
            xShift = 40f;yShift = -30f;
            xShifted=yShifted=false;
            this.transform.position=Input.mousePosition-new Vector3(xShift,yShift,0f);
            this.gameObject.SetActive(false);
            inside=false;
        }
}
 
void FixedUpdate () {
        if(inside){
            //ScreenSpaceOverlay Tooltip
            if(GUIMode==RenderMode.ScreenSpaceOverlay){
                Vector3 newPos = Input.mousePosition-new Vector3(xShift,yShift,0f);
                //check and solve problems for the tooltip that goes out of the screen on the horizontal axis
                float val;
                val=(newPos.x-(width/2));
                if( val<=0){
                    newPos.x+=(-val);
                }
                val=(newPos.x+(width/2));
                if(val>screenWidth){
                    newPos.x-=(val-screenWidth);
                }
                //check and solve problems for the tooltip that goes out of the screen on the vertical axis
                val=(screenHeight-newPos.y-(height/2));
                if(val<=0){
                    if(!yShifted){
                        yShift=(-yShift+25f);
                        newPos.y+=yShift*2;
                        yShifted=true;
                    }
                }
                this.transform.position=newPos;
        }
}


here is a little video showing how it works. we make the tooltip appearing a bit above the mouse pointer so that it doesn't cause onpointerover problems, and we use the fixedupdate for the refresh as it is somehow more reliable about flickering and speed.

Video Example Tooltip System

if you have any problem in implementing it, feel free to ask more details!

Cheers,
H

Start a group Groups
Hammer & Ravens

Hammer & Ravens

2 members Developer & Publisher

Development group based in Tallinn, Estonia. After a past as independent media developers (kinect,leap motion,touch screens, stereoscopics and autostereoscopics...

Grand strategy fans

Grand strategy fans

25 members Fans & Clans

For everybody who loves/likes grand strategy games.

Tower Defense IndieDev

Tower Defense IndieDev

12 members Fans & Clans

For all the indiedev out there that think that, while needing to reinvent itself and envolve, Tower Defense is far from dead. To share ideas, to share...

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

X

Latest posts from @eir_td

RT @Ham_Rav: Canes and Pouches, Hats and mules...🫏 The Pilgrims arrive Prepare all your brews!🍻⛪ #pixelart #screenshotsaturdayT.co

Jul 8 2023

RT @Ham_Rav: This week's Something's Brewing is out🍻⛪ Read all about Ale Abbey's recent development progress: 🫏 the Pilgrims ar… T.co

Jul 7 2023

RT @DokHgn: All the work done finally paid off, and I am now a certified Lvl 3 Beer Sommelier! 😍🍻😜 #indiedev #beer T.co

Jul 6 2023

RT @Ham_Rav: A few shots from Ale Abbey's Meditation Room😌 trying to nail that somber, relaxing vibe one 🗿 at a time!🍻⛪… T.co

Jul 1 2023

RT @Ham_Rav: Ale Abbey's development news weekly report, AKA Something's Brewing, just out!🍻⛪ Work on the *new* Meditation Room… T.co

Jul 1 2023

RT @Ham_Rav: It's a strange day in the Abbey when you randomly happen upon a statue of @DokHgn - and his trusty pooch Olaf - in… T.co

Jun 28 2023

RT @Ham_Rav: We're not saying that a third wave of Monk and Nun characters dropped, but it kinda did🙌 Since they are still WIP,… T.co

Jun 24 2023

RT @DokHgn: In our latest blog entry we talk about how we solved the perspective problem of 2d floors trying to simulate a 3d p… T.co

Jun 24 2023

RT @Ham_Rav: Today's Something's Brewing is juicy!✍️🔥 A little bit on the longer side, but it's fully dedicated on our overcomi… T.co

Jun 23 2023

RT @Ham_Rav: Sister Pinta is planning to brew a Belgian Kriek and was looking for a fruit press for those cherries. Well Sister,… T.co

Jun 22 2023