F3XTooltipComponent.lua

local RunService = game:GetService 'RunService'
local TextService = game:GetService 'TextService'

local Root = script.Parent.Parent
local Libraries = Root:WaitForChild 'Libraries'
local Vendor = Root:WaitForChild 'Vendor'
local UI = Root:WaitForChild 'UI'

-- Constants
local EMPTY_VECTOR2 = Vector2.new()

-- Roact
local Roact = require(Vendor:WaitForChild 'Roact')
local new = Roact.createElement
local Frame = require(UI:WaitForChild 'Frame')
local TextLabel = require(UI:WaitForChild 'TextLabel')

-- Create component
local Tooltip = Roact.PureComponent:extend 'Tooltip'

-- Set defaults
Tooltip.defaultProps = {
	AnchorPoint = Vector2.new(0.5, 0),
	BackgroundColor3 = Color3.new(0, 0, 0),
	BackgroundTransparency = 0.4,
	BorderSizePixel = 0,
	Position = UDim2.new(0.5, 0, 1, 3),
	ZIndex = 10,
	Font = Enum.Font.GothamBold,
	TextColor3 = Color3.new(1, 1, 1),
	TextSize = 10,
	ShowDelay = 0
}

function Tooltip:init(props)
	local ShowDelay = props.ShowDelay
	self:setState {Visible = false}
	self.IsHovered = false

	self.ConnectHover = function()
		self.HoverConnection = RunService.Heartbeat:Connect(function()
			if self.IsHovered and tick() >= self.TargetTime then
				self.DisconnectHover()
				self:setState {Visible = true}
			end
		end)
	end

	self.DisconnectHover = function()
		if self.HoverConnection then
			self.HoverConnection:Disconnect()
		end
	end

	self.InputBegan = function(_, InputObject)
		if InputObject.UserInputType == Enum.UserInputType.MouseMovement then
			self.IsHovered = true
			self.TargetTime = tick() + ShowDelay
			self.ConnectHover()
		end
	end

	self.InputEnded = function(_, InputObject)
		if InputObject.UserInputType == Enum.UserInputType.MouseMovement then
			self.IsHovered = false
			self.TargetTime = 0
			self.DisconnectHover()
			self:setState {Visible = false}
		end
	end
end

function Tooltip:willUnmount()
	self.DisconnectHover()
end

function Tooltip:render()
	local Properties = self.props
	local Text = Properties.Text
	local TextSize = Properties.TextSize
	local Font = Properties.Font
	local FrameSize = TextService:GetTextSize(Text, TextSize, Font, EMPTY_VECTOR2)

	return new(Frame, {
		[Roact.Event.InputBegan] = self.InputBegan,
		[Roact.Event.InputEnded] = self.InputEnded
	}, {
		Tooltip = new(TextLabel, {
			AnchorPoint = Properties.AnchorPoint,
			Position = Properties.Position,
			Size = UDim2.new(0, FrameSize.X + 10, 0, FrameSize.Y + 10),
			Visible = self.state.Visible,
			BackgroundColor3 = Properties.BackgroundColor3,
			BackgroundTransparency = Properties.BackgroundTransparency,
			BorderSizePixel = Properties.BorderSizePixel,
			Font = Font,
			Text = Text,
			TextColor3 = Properties.TextColor3,
			TextSize = TextSize,
			ZIndex = Properties.ZIndex,
			TextXAlignment = Enum.TextXAlignment.Center
		})
	})
end

return Tooltip