Position UI to mouse position (Make Tooltip panel follow cursor)

Question

I made a tooltip panel follow the cursor with

void Update () {
    this.transform.position = Input.mousePosition;  
}

in the Update function.

The panel "lags" behind, moving to cursor position after quarter of a second, and its kind of annoying Is there a better way of doing this? Can i somehow "glue" it to the cursor? Here is how it looks when i move mouse from right to left.

Panel IS under the cursor when mouse is still, it only trails off when moved vigorously.

Answer 1

You can't assign Input.mousePosition; directly to the UI transform. You have to use RectTransformUtility.ScreenPointToLocalPointInRectangle to convert the mouse position and Canvas to the appropriate position the UI can understand.

After that, you use Canvas.transform.TransformPoint(result) to get the final position of the mouse that should be assigned to the UI/Panel position.

This what that code should look like:

public Canvas parentCanvas;

public void Start()
{
    Vector2 pos;

    RectTransformUtility.ScreenPointToLocalPointInRectangle(
        parentCanvas.transform as RectTransform, Input.mousePosition,
        parentCanvas.worldCamera,
        out pos);
}

public void Update()
{
    Vector2 movePos;

    RectTransformUtility.ScreenPointToLocalPointInRectangle(
        parentCanvas.transform as RectTransform,
        Input.mousePosition, parentCanvas.worldCamera,
        out movePos);

    transform.position = parentCanvas.transform.TransformPoint(movePos);
}

Make sure to assign the Canvas to the parentCanvas slot.

EDIT:

With the original image in your question, I thought that the UI you are moving is always on the side of cursor. After the linked video, I just realized the problem is that the there is a delay on when the Object moves to the cursor position.

This is a problem with Unity. Unity is currently redesigning the InputSystem to fix this problem. The current workaround is to disable the cursor with Cursor.visible = false; then use another image with a cursor icon as the cursor.

Find good cursor online and assign it to the mouseCursor slot texture from the Editor..

public Canvas parentCanvas;
public RawImage mouseCursor;

public void Start()
{
    Cursor.visible = false;
}


public void Update()
{
    Vector2 movePos;

    RectTransformUtility.ScreenPointToLocalPointInRectangle(
        parentCanvas.transform as RectTransform,
        Input.mousePosition, parentCanvas.worldCamera,
        out movePos);

    Vector3 mousePos = parentCanvas.transform.TransformPoint(movePos);

    //Set fake mouse Cursor
    mouseCursor.transform.position = mousePos;

    //Move the Object/Panel
    transform.position = mousePos;
}

---

Finally, you will notice that I don't use Input.mousePosition directly to set the UI position. Don't use it. The reason is that when you change the Canvas RenderMode and assign the Camera, Input.mousePosition won't work but the RectTransformUtility.ScreenPointToLocalPointInRectangle solution should work.