Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tooltips to buttons #637

Merged
merged 6 commits into from
Oct 7, 2022
Merged

Add tooltips to buttons #637

merged 6 commits into from
Oct 7, 2022

Conversation

boatbomber
Copy link
Member

Adds tooltips to the buttons. This may seem a bit "extra" for now, but as the Rojo workflow gets more complex (two-way, etc) the single-word buttons aren't enough to convey the meaning behind them, necessitating tooltips. Superfluous tips will likely never been seen by users anyway (since they are unlikely to hover) so there's no detriment to adding them even to simple buttons.

Features:

  • Easy usage via Roact component
  • Auto size and position using available space
  • Tail triangle points at your mouse
  • Follows theme and style
  • Supports multiple canvases and arbitrary tips

Tech breakdown:
Tooltip.Provider wraps the App, cascading the Context everywhere. Tooltip.Canvas renders any tip popups- it is done this way because Sibling ZIndex means the popups must be in a separate layer above all else. It also allows us to support multiple widgets by drawing Canvases in multiple places. Finally, and this is the part most used, we have Tooltip.Trigger which we put inside any element that we want a popup tip on.

Sample Usage:

Sample = e(TextButton, {
	text = "Sample",
	style = "Bordered",
}, {
	Tip = e(Tooltip.Trigger, {
		text = "This is a sample tooltip"
	}),
})

Demo:
tooltips

Copy link
Contributor

@LPGhatguy LPGhatguy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work! Some review feedback attached.

It's kind of strange that we have to put tooltip triggers inside widgets instead of around widgets. Alas, we live with Roblox's lack of a UI layout model. 😅

plugin/src/App/Components/Tooltip.lua Outdated Show resolved Hide resolved
plugin/src/App/Components/Tooltip.lua Outdated Show resolved Hide resolved
plugin/src/App/Components/IconButton.lua Outdated Show resolved Hide resolved
plugin/src/App/Components/Tooltip.lua Outdated Show resolved Hide resolved
plugin/src/App/Components/Tooltip.lua Outdated Show resolved Hide resolved
@LPGhatguy LPGhatguy merged commit b88d34c into rojo-rbx:master Oct 7, 2022
@boatbomber boatbomber deleted the tooltips branch October 19, 2022 02:40
Dekkonot pushed a commit to UpliftGames/rojo that referenced this pull request Jan 11, 2024
* Add tooltips

* Fix whitespace

* Avoid overloaded word canvas

* Clean render function

* Switch folder to fragment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants