How would I add ALT Text to my UI?

So, I would like to add alt text to my UI.
It’s not really needed. I just found myself messing around with UI and it just came to my head.

Would I have to make a new frame for it, or is it maybe built in (don’t think so)?

What I mean by alt text, is that if I would put my mouse over my UI for a couple of seconds, it would show a box explaining what it does.

I tried to find a post about this, but I found nothing.

If I have to script it myself, how would I know if the user is hovering over the UI for like 5 seconds or more?

Thanks!

:white_check_mark: Best solution by @LovreDev in post #4

:white_check_mark: Second solution by @realmile in post #5

4 Likes

You can use the MouseEnter and MouseLeave events on a TextButton to know when the mouse is/isn’t hovering over the button.

1 Like

That’s good, but how would I check if the player is still hovering over the UI after 3 seconds?

I’m pretty sure that the MouseEnter and MouseLeave events only fire when you hover over the UI.

I need a way to know how long it’s been on the UI, so that the alt text only shows after 3 seconds of the mouse being on the UI, and not if it’s there for a shorter period of time.

You can do something like this, in the MouseEnter we are going to change the isHovering boolean to true, and set the start number to the current tick (time), now we know when the Mouse entered the button, the RenderStepped loop will continuously check if 3 seconds elapsed since we entered, we can set the finished boolean to true so it doesn’t go crazy. You can put the code that executes after 3 seconds inside the if statement

--!strict

-- Services
local RunService = game:GetService("RunService")

-- Variables
local button = script.Parent.TextButton

local start = tick()
local isHovering = false
local finished = false

-- Events
button.MouseEnter:Connect(function()
	isHovering = true
	start = tick()
end)

button.MouseLeave:Connect(function()
	isHovering = false
	print("You can hide the interface")
end)

RunService.RenderStepped:Connect(function()
	if (isHovering and not finished) then
		if (tick() - start >= 3) then
			finished = true
			print("Held for 3 seconds")
		end
	end
end)
3 Likes

If you simply want it to show after 3 seconds of you hovering over the ui then you can do it like this:

local tip = script.Parent:WaitForChild("tip") --this is the alt text
local uis = game:GetService("UserInputService")

local hovering
local mousepos = nil

button.MouseEnter:Connect(function()
	hovering = task.delay(3,function()
		mousepos = uis:GetMouseLocation()

		tip.Position = UDim2.new(0,mousepos.X,0,mousepos.Y)
		tip.Text = button.Value.Value
		tip.Visible = true
	end)
end)
	
button.MouseLeave:Connect(function()
	if hovering then
		task.cancel(hovering)
	end
	
	mousepos = nil
	tip.Visible = false
	tip.Text = ""
end)

With button being your ui you want to hover over, you need to add a string value inside of the button and in it write whatever you want alt text to show.
If you want it to be more similar to the hovering over on for example devforum, instead of using MouseEnter you can use MouseMoved to check if mouse has been moved over the ui element, if so then dont show the alt text until mouse has been stationary for 3 seconds:

local distance = 10 --in pixels, this is if you want it to disappear if you move
--the mouse after alt text has been shown and the distance is basically how much you
--can move it before it disappears

button.MouseMoved:Connect(function(x,y)
	if mousepos then
		if x < mousepos.X+distance and x > mousepos.X-distance and
			 y < mousepos.Y+distance and y > mousepos.Y-distance then
			return
		end
		
		if hovering then
			task.cancel(hovering)
		end

		mousepos = nil
		tip.Visible = false
		tip.Text = ""
	
		return
	end
	
	if hovering then
		task.cancel(hovering)
	end

	hovering = task.delay(3,function()
		mousepos = uis:GetMouseLocation()
		
		tip.Position = UDim2.new(0,mousepos.X,0,mousepos.Y)
		tip.Text = button.Value.Value
		tip.Visible = true
	end)
end)

If you only care about not being able to move the mouse before its been shown you can just delete the whole first if statement in MouseMoved.

1 Like

Worked great with adjustments, thanks!

1 Like

Do you mean that if I remove the first if statement in MouseMoved, it won’t show unless I keep my mouse there for 3 seconds or more?

And if so, did I do it correctly? It still shows after 3 seconds even if I stop hovering over the UI before the 3 seconds.

local hovering = false
local tip = script.Parent.Parent.Frame
local mousepos = nil
local uis = game:GetService("UserInputService")

local distance = 10 --in pixels, this is if you want it to disappear if you move
--the mouse after alt text has been shown and the distance is basically how much you
--can move it before it disappears

script.Parent.MouseMoved:Connect(function(x,y)

	if hovering then
		task.cancel(hovering)
	end

	hovering = task.delay(3,function()
		mousepos = uis:GetMouseLocation()

		tip.Position = UDim2.new(0,mousepos.X,0,mousepos.Y)
		tip.Visible = true
	end)
end)

--Not my actual code, just what I used to test it.
Edit 12th July 2024

Wow… I completely understood everything the first time I read this now… I have really improved a lot at reading scripts and understanding what people mean since back then.

1 Like

No, that if statement is for it to disappear after its been shown when you move the mouse, you still need the MouseLeave from the first code to make sure it doesnt show if you stop hovering before 3 seconds.

1 Like

Your code works exactly how I wanted. But unfortunately you can only mark 1 reply as a solution.
You responded a bit later than the other person (but still very fast) so I will have to give it to him instead. Very sorry about that, but thanks for your help!

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.