MGTooltips is a lightweight, customizable tooltip system for iOS, designed to guide users through app workflows with ease. It supports flexible configurations, seamless animations, and a developer-friendly API.
Tooltip.Demo.Presentation.mp4
- Customizable Appearance: Adjust colors, fonts, corner radius, and arrow sizes to match your app's theme.
- Directional Control: Display tooltips in any direction: top, bottom, left, or right.
- Step-by-Step Navigation: Built-in support for previous, next, and completion buttons.
- Target Highlighting: Highlight the UI elements being explained to focus the user's attention.
- Dynamic Arrow Positioning: Smart arrow positioning to avoid overlapping UI elements.
- Localization Support: Fully localized button titles using String Catalogs
Localizable.xcstrings
. We welcome community contributions for additional language support! If you'd like to help translate MGTooltips into your language, please open a pull request or issue. - Animation Support: Smooth appearance and disappearance animations.
- SPM & CocoaPods: Easy integration into your project.
- Open your Xcode project.
- Go to File > Add Packages....
- Enter this repoβs URL in the search field.
- Select the package and confirm to add it to your project.
Or just add the following line to your Package.swift
file:
dependencies: [
.package(url: "https://github.com/miswag/mgtooltips.git", from: "1.1.1")
]
- Add the following to your Podfile:
pod "MGTooltips", "1.1.1"
- Then, run the following command::
pod install
- Clone the repository::
git clone https://github.com/miswag/mgtooltips.git
- Drag and drop the MGTooltips folder from the cloned repository into your Xcode project.
- Ensure the MGTooltips module is included in your target's Build Phases under Compile Sources.
- To explore the demo:
- Open the MGTooltips.xcodeproj file from the cloned repository.
- Build and run the demo to see the full capabilities of the tooltip system.
import MGTooltips
// Create tooltip manager
let menuTooltips = MGTooltip()
// Create tooltip items
let tooltip1 = TooltipItem(
target: buttonView,
message: "Tap here to start",
side: .top
)
let tooltip2 = TooltipItem(
target: tableView,
message: "Your content appears here",
side: .bottom
)
// Add tooltips to manager
menuTooltips.appendTooltips([tooltip1, tooltip2])
// Start the sequence
menuTooltips.start()
let tooltipManager = MGTooltip()
// Customize colors
tooltipManager.backgroundColor = .systemBackground
tooltipManager.textColor = .label
tooltipManager.buttonBackgroundColor = .systemBlue
// Customize sizes
tooltipManager.tooltipCornerRadius = 8
tooltipManager.arrowSize = CGSize(width: 16, height: 8)
// Customize fonts
tooltipManager.font = .systemFont(ofSize: 14)
tooltipManager.buttonFont = .systemFont(ofSize: 12, weight: .medium)
// Choose button configuration
tooltipManager.buttonConfiguration = .nextAndPrevious // .none, .nextOnly
// Customize button appearance
tooltipManager.buttonCornerRadius = 12.5
tooltipManager.buttonBorderWidth = 1
tooltipManager.buttonBorderColor = .systemBlue
extension ViewController: MGTooltipDelegate {
func tooltipsDidStarted() {
print("Tutorial started")
}
func tooltipDidShowed(at index: Int, item: TooltipItem) {
print("Showing tooltip \(index)")
}
func tooltipDidDismissed(at index: Int, item: TooltipItem) {
print("Dismissed tooltip \(index)")
}
func tooltipsDidCompleted() {
print("Tutorial completed")
}
}
To show tooltips only once:
// Initialize with a unique key
let launchTooltips = MGTooltip(key: "firstLaunchTutorial")
- iOS 13.0+
- Swift 5.0+
- Xcode 13.0+
Contributions are welcome! Please feel free to submit a Pull Request.
Tip
Fork the repository, and create a feature branch.
MGTooltips is available under the MIT license. See the LICENSE file for more info.
- π LinkedIn: @Mosa Khaldun
- βοΈ Email: [email protected]
If you're having any problem, please raise an issue on GitHub.