Home

Awesome

SwiftUI Tooltip

Workflow checks Release version License

"Buy Me A Coffee"

This package provides you with an easy way to show tooltips over any SwiftUI view, since Apple does not provide one.

<p align="center"> <img src="https://user-images.githubusercontent.com/29360707/146054113-e5e2f599-4427-4e75-b2be-eeb2e80f0958.png" alt="preview" width="500px" /> </p>

Getting started

You can add this package to your project using Swift Package Manager. Enter following url when adding it to your project package dependencies:

https://github.com/quassum/SwiftUI-Tooltip.git

We are using semver for versioning, so we would recomment selecting "Up to next major relase" option for this package.

After you added the package, all you need to do is import it and you can add a tooltip to any SwiftUI View in that file!

Usage

Step 1

⭐️ Start this repo! ⭐️

Basic use case

As the first example, the Text view is provided as the tooltip content and it's attached to the other Text view. Below you can see the example of code that is required to create the tooltip and the result you see on the screen.

Code:

import SwiftUITooltip
...
Text("Say something nice...")
    .tooltip(.bottom) {
        Text("Something nice!")
    }
...

Result:

example 1

Controlling whether the tooltip is present

You can cantrol whether the tooltip is presented or not through the _ enabled: Binding<Bool> argument. Below you can see an example of how this would look like.

@State var tooltipVisible = false
...
Button("Toggle tooltip") {
    self.tooltipVisible = !self.tooltipVisible
}
...
Text("I'm the confusing text.")
    .tooltip(self.tooltipVisible) {
        Text("I'm the text explaining the confusing text.")
    }

Using custom configuration to add a jumping animation

Second example shows you how you can add jumping animation to the tooltip from the first example.

Code:

import SwiftUI
import SwiftUITooltip

struct SwiftUIView: View {
    var tooltipConfig = DefaultTooltipConfig()
    
    init() {
        self.tooltipConfig.enableAnimation = true
        self.tooltipConfig.animationOffset = 10
        self.tooltipConfig.animationTime = 1
    }
    
    var body: some View {
        Text("Say something nice...")
            .tooltip(.bottom, config: tooltipConfig) {
                Text("Something nice!")
            }
    }
}

Result:

example 2

Configuration Reference

Below you can see all the properties that you can set in the configuration.

PropertyTypeDescription
sideTooltipSideSide of view that the tooltip should appear on
marginCGFloatMargin from the tooltip to the view it's attached to
borderRadiusCGFloatRounded border control
borderWidthCGFloatThickness of the border
borderColorColorBorder color
backgroundColorColorBackground color inside of the tooltip
contentPaddingLeftCGFloatLeft padding inside of the tooltip
contentPaddingRightCGFloatRight padding inside of the tooltip
contentPaddingTopCGFloatTop padding inside of the tooltip
contentPaddingBottomCGFloatBottom padding inside of the tooltip
showArrowBoolWhether to show or hide the arrow
arrowWidthCGFloatWidth of the base of the triangle
arrowHeightCGFloatHeight of the triangle
enableAnimationBoolWhether to bounce the tooltip or not
animationOffsetCGFloatDelay between tooltip bouncing animations
animationTimeDoubleHow long should the tooltip bounce last

Contributing

If you like this package but feel that you need more control or custom implementation - feel free to open an issue, send a pull request or fork the repo!

Reward function: Contributors with even smallest PRs will be added to the list in the Contributors section!

Contributors

License

This package is licensed under MIT License