Tooltip Module - An easy way to make tooltips for UI Objects

Resources Community Resources
#1

Tooltip Module V2

NOTE:

This is my first open-sourced project on the DevForums, so if there are errors in documentation or bugs in the code or anything you’d like to point out, please do.

About

Tooltip Module is something I made about a month ago just because I was bored, and I decided to make it open-source, mainly for the fact that I couldn’t find any other tooltip module out here on the DevForums. I’m not going to keep this in active development, as I’m involved in other projects right now, but I sure will fix bugs or even add suggested features if requested.

Links

Get the Tooltip Module here: https://www.roblox.com/library/6894459128/Tooltip-Module
GitHub RAW: https://raw.githubusercontent.com/pranvexploder/Roblox/main/Tooltip%20Module/V2
Uncopylocked Test Place: https://www.roblox.com/games/6784339790/Tooltip-Module-Open-Source

Update Log

• Rewrote the module to more of an OOP (metatable) approach
• Now you can set Label properties directly via the tooltip object, thanks to __newindex (its mentioned in the docs below)
• Added some aliases to functions:
- tooltip:Disconnect() - tooltip:disconnect(), tooltip:Destroy(), tooltip.destroy()
- tooltip:Show() - tooltip:show()
- tooltip:Hide() - tooltip:hide()

Documentation

Documentation is already given at the top of the ModuleScript, but let me write it down here anyways.

Constructor

TooltipModule(<Your UI Object> [Instance], <Tooltip Text> [String])

  • Creates a new tooltip
  • Object parameter is required
  • Text parameter is optional. If not passed, defaults to “Tooltip”
  • Returns object: tooltip
--Example:
local module = require(Tooltip)
local tooltip = module(script.Parent.TextButton, "This is my tooltip text!")

Object tooltip functions

1. tooltip:Show()

  • Makes the tooltip visible
  • Returns object: tooltip
--Example:
local tooltip2 = tooltip:Show() --tooltip2 and tooltip are the same

2. tooltip:Hide()

  • Gets the tooltip out of view
  • Returns object: tooltip
--Example:
local tooltip2 = tooltip:Hide() --tooltip2 and tooltip are the same

3. tooltip:SetText(<Your Text> [String])

  • Changes the tooltip text
  • Text parameter is required
  • Returns object: tooltip
--Example:
local tooltip2 = tooltip:SetText("I changed the text") --tooltip2 and tooltip are the same

4. tooltip:SetOffset(<Your Offset> [UDim2])

  • Changes the tooltip offset relative to the mouse position
  • Offset parameter is required
  • Returns object: tooltip
--Example:
local offset = UDim2.new(0.035, 0, 0.15, 0)
local tooltip2 = tooltip:SetOffset(offset) --tooltip2 and tooltip are the same

5. tooltip:SetPadding(<Your Padding> [Vector2])

  • Changes the padding between text and frame
  • Padding parameter is required
  • Returns object: tooltip
--Example:
local padding = Vector2.new(0.25, 0.25)
local tooltip2 = tooltip:SetPadding(padding) --tooltip2 and tooltip are the same

6. tooltip:Disconnect()

  • Deletes the tooltip
--Example:
tooltip:Disconnect()

Object tooltip properties

1. tooltip.Gui [Instance]

  • The tooltip gui
  • Consists of Frame > TextLabel
  • Can be easily customizable

2. tooltip.Text [String]

  • Changes the tooltip text
  • The function need not necessarily used but using the function is recommended

3. tooltip.Offset

  • Changes the tooltip offset relative to the mouse position
  • The function need not necessarily used but using the function is recommended

4. tooltip.Padding

  • Changes the padding between text and frame
  • The function need not necessarily used but using the function is recommended

5. tooltip[any_textlabel_property]

  • Changes the specified property of the “HoverText” TextLabel in the Tooltip gui

Example Code

local module = require(script.Parent.Parent.Tooltip) -- Require the Tooltip Module
local tooltip = module(script.Parent, "Test Tooltip") -- Pass the object to lay the tooltip on and the tooltip text

wait(10)
tooltip.TextColor3 = Color3.new(1, 0 ,0)
tooltip:SetText("Tooltip Text + TextLabel Color Changed") -- SetText function, allows to change the tooltip text

wait(10)
tooltip.TextColor3 = Color3.new(1, 1, 1)
tooltip.Gui.Frame.AnchorPoint = Vector2.new(0, 0) -- Customizing the tooltip gui, changing the Frame's AnchorPoint to be specific
tooltip:SetOffset(UDim2.new(0.025, 0, 0, 0)) -- Set a Tooltip offset relative to mouse position
tooltip:SetText("Tooltip Offset + Frame AnchorPoint Changed") -- Change text as in line 4

wait(10)
tooltip:Disconnect() -- Disconnect the tooltip, basically wipe it off from existence lol
warn("Tooltip disconnected")

--[[
Tooltip Gui hierarchy: 
	> Tooltip.Gui Instance [ScreenGui]
		> Tooltip.Gui.Frame Instance [Frame]
			> Tooltip.Gui.Frame.HoverText Instance [TextLabel]
]]--

Conclusion

As mentioned above, this is my first open-source project on the DevForums, so please leave feedback on it down in the replies. Please point out if there are bugs or errors in documentation or literally anything that I have to fix. Constructive critisism is appreciated.

If you plan on using this module, you need not give credit but credits are always appreciated!

- 0V_ex (Vex ~#1069)

32 Likes
#2

Nice module, can be usefull.
I found a glitch on it, the size of the Tooltip don’t size correctly.

And even when this one has the right size, we can see it go from small to large very quickly

1 Like
#3

Thank you for pointing it out!

The way how the sizing works is that the TextLabel is scaled to a very large size on the X Scale so that the entire text fills in one row without wrapping. Later the frame is sized based on the TextBounds (you can see this process in lines 114-116).

I don’t think I can fix that issue until I find a better way around it. However I think it happens so quickly that it’s almost negligible. However, I’ll look into it.

#4

This is a pretty neat module, I might use it in some of my projects. Thanks!

2 Likes
#5

This is a really nice module, however I have some feature requests:

  • See if there’s a way to fix the sizing issue. I can’t seem to fix the sizing myself, despite my attempts, except that recalculating the frame size twice works after the tooltip is shown for the first time (so it breaks on the first hover, then it renders correctly thereafter).
  • Have a way to automatically move the tooltip around when it starts clipping outside the viewport, otherwise tooltips can go off screen (or if your UI elements are on the right, they start partially off screen).
1 Like
#6

Actually, I’m just thinking about it now and don’t know why I didn’t think about it before, but you can fix it by setting the frame visibility to false and set it to true once the size is changed

2 Likes
#7

This is a very good module. Helped me really much.

1 Like
#8

Too early of a response, I know.
I’m pretty sure If I turn off the visibility the “TextBounds” property will go back to 0,0. I will try it though. If it works I will push an update with that in the backend.

I will implement this once I make time for this project. Thanks.

Thank you! Glad it helped you.