Skip to content

Lightweight, customizable tooltip system for iOS, designed to guide users through app workflows with ease.

License

Notifications You must be signed in to change notification settings

Miswag/MG-Tooltips

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

4 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

MGTooltips

Swift Version Platform CocoaPods UIKit SPM Compatible License

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.

πŸ“± Demo

Tooltip.Demo.Presentation.mp4

✨ Features

  • 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.

πŸ“₯ Installation

Swift Package Manager

  1. Open your Xcode project.
  2. Go to File > Add Packages....
  3. Enter this repo’s URL in the search field.
  4. 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")
]

CocoaPods

  1. Add the following to your Podfile:
pod "MGTooltips", "1.1.1"
  1. Then, run the following command::
pod install

Manual Installation (Including Demo)

  1. Clone the repository::
  git clone https://github.com/miswag/mgtooltips.git
  1. Drag and drop the MGTooltips folder from the cloned repository into your Xcode project.
  2. Ensure the MGTooltips module is included in your target's Build Phases under Compile Sources.
  3. 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.

πŸš€ Quick Start

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()

βš™οΈ Customization

Appearance

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)

Button Configuration

// Choose button configuration
tooltipManager.buttonConfiguration = .nextAndPrevious  // .none, .nextOnly

// Customize button appearance
tooltipManager.buttonCornerRadius = 12.5
tooltipManager.buttonBorderWidth = 1
tooltipManager.buttonBorderColor = .systemBlue

Delegate Methods

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")
    }
}

πŸ”„ One-Time Display

To show tooltips only once:

// Initialize with a unique key
let launchTooltips = MGTooltip(key: "firstLaunchTutorial")

πŸ“‹ Requirements

  • iOS 13.0+
  • Swift 5.0+
  • Xcode 13.0+

🀝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Tip

Fork the repository, and create a feature branch.

πŸ“„ License

MGTooltips is available under the MIT license. See the LICENSE file for more info.

πŸ‘¨β€πŸ’» Author

Support

If you're having any problem, please raise an issue on GitHub.

About

Lightweight, customizable tooltip system for iOS, designed to guide users through app workflows with ease.

Resources

License

Stars

Watchers

Forks

Packages

No packages published