Easy Tooltip for your SwiftUI Project

Overview

SwiftUI Tooltip

Workflow checks Release version License

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

preview

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/quassummanus/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

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

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.

Property Type Description
side TooltipSide Side of view that the tooltip should appear on
margin CGFloat Margin from the tooltip to the view it's attached to
borderRadius CGFloat Rounded border control
borderWidth CGFloat Thickness of the border
borderColor Color Border color
backgroundColor Color Background color inside of the tooltip
contentPaddingLeft CGFloat Left padding inside of the tooltip
contentPaddingRight CGFloat Right padding inside of the tooltip
contentPaddingTop CGFloat Top padding inside of the tooltip
contentPaddingBottom CGFloat Bottom padding inside of the tooltip
showArrow Bool Whether to show or hide the arrow
arrowWidth CGFloat Width of the base of the triangle
arrowHeight CGFloat Height of the triangle
enableAnimation Bool Whether to bounce the tooltip or not
animationOffset CGFloat Delay between tooltip bouncing animations
animationTime Double How 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

Comments
  • Package unusable due to access control

    Package unusable due to access control

    Describe the bug I added this package to my Xcode project, and I am unable to use it because the View extension methods are not public.

    To Reproduce Steps to reproduce the behavior:

    1. Add package to Xcode project
    2. Import SwiftUITooltip into ContentView.swift
    3. Attempt to invoke tooltip(...) method.
    4. See compiler error.

    Expected behavior The methods should be accessible.

    bug 
    opened by avi-screenovate 11
  • Setting background color leaves artifact

    Setting background color leaves artifact

    Describe the bug Setting the background color leaves an artifact when selecting a side that is not top.

    To Reproduce Steps to reproduce the behavior:

    1. Configure side trailing (also tested with leading & bottom, same issue)
    2. Set backgroundColor to something not clear

    Expected behavior All of the tooltip's background is set to backgroundColor.

    Screenshots artifact-trailing

    Desktop (please complete the following information):

    • OS: iOS 15.2
    • Version 1.1.2
    bug 
    opened by Eckelf 6
  • 27:  Border not visible on self sized tooltip

    27: Border not visible on self sized tooltip

    Fix the bug on issue 27: The content width and content height are calculated from the tooltip content size or from the given size, so we can always set the frame with .frame(width: contentWidth, height: contentHeight)

    opened by jsivanes 2
  • Fixed content overflow for small parent objects

    Fixed content overflow for small parent objects

    Notes

    Closes #11. Thanks @chrysb for the issue.

    Problem

    The content was overflowing if you set the .frame of the element you attach tooltip to too small.

    Solution

    • Added .fixedSize to content inside of ViewModifier

    Screenshots

    Code used for screenshots below

    Circle()
      .fill(Color.green)
      .frame(width: 36, height: 36)
      .tooltip(.top) {
        Text("Tap here")
      }
    

    Before fix

    before

    After fix

    after bug 
    opened by bring-shrubbery 2
  • Tooltips should be able to expand beyond the bounds of the containing element

    Tooltips should be able to expand beyond the bounds of the containing element

    Hey all,

    Great initiative. I started to build my own and ran into this issue where I couldn't get the tooltip to expand beyond the frame of what I attach it too. I see that this project has the same issue:

    Circle()
      .fill(Color.green)
      .frame(width: 36, height: 36)
      .tooltip(.top) {
        Text("Tap here")
      }
    

    You'll see that the tooltip shows up as just "..." because it's getting truncated and limited to 36px wide.

    bug 
    opened by chrysb 2
  • Long text

    Long text

    Describe the bug Having a long text for the tooltip causes it to overshoot the bounds.

    To Reproduce Steps to reproduce the behavior: struct ContentView: View { var body: some View { Text("Hello") .tooltip(.bottom) { Text("The transaction fee covers PayPal processing costs and includes PayPal Buyer Protection") } } }

    Expected behavior It should stay within bounds and stretch vertically

    Screenshots Screen Shot 2022-08-23 at 11 01 53 am

    Desktop (please complete the following information):

    • OS: [e.g. iOS 15.5]

    Smartphone (please complete the following information):

    • Device: [e.g. iPhone 13 Pro Max]

    Additional context Add any other context about the problem here.

    opened by ckakumanu 1
  • How to present and dismiss a tooltip on demand

    How to present and dismiss a tooltip on demand

    Is your feature request related to a problem? Please describe. Is there a recommended procedure to accomplish the ability present and dismiss tooltips on demand? I've noticed several forks of this library that attempt to add this into the tooltip api and was wondering if there was a different recommendation from the authors.

    Describe the solution you'd like An api that allows us to quickly present and dismiss the tooltip.

    Describe alternatives you've considered I was able to achieve this functionality by having two versions of the same view with a control statement. One with a tooltip attached and one without.

    if showTip {
        Text("Target View")
          .tooltip {
               Text("Just the tip")
          }
    } else {
        Text("Target View")
    }
    
    enhancement 
    opened by chenium 1
  • Add tests

    Add tests

    Is your feature request related to a problem? Please describe.

    Currently, there's no testing in this project. This should be fixed.

    Describe the solution you'd like

    Testing should be implemented using a regular swift package testing approach.

    enhancement 
    opened by bring-shrubbery 1
  • background color , arrow color, border color

    background color , arrow color, border color

    how can i change color for background , arrow and border also i want to add it on bottom of navigation item how can i do tht? . bottom , .bottom trailing , bottom leading not working properly

    enhancement question 
    opened by jahnaviShingala 1
  • Bounce animation is no longer working properly

    Bounce animation is no longer working properly

    Describe the bug The tooltip snaps over and snaps back. There isn't a smooth motion as shown in the documentation.

    To Reproduce Added a tooltip to my view. I added the configurations as shown in the documetation

    var tooltipConfig = DefaultTooltipConfig() init() { self.tooltipConfig.enableAnimation = true self.tooltipConfig.animationOffset = 10 self.tooltipConfig.animationTime = 1 self.tooltipConfig.backgroundColor = .primaryColor self.tooltipConfig.borderColor = .secondaryColor }

    the tool tip does show, but the animation is not fluid, it just snaps into place, then back.

    Expected behavior The tooltip smoothly glides up and down as shown in the documentation.

    Smartphone (please complete the following information):

    • Device: IPhone13
    • OS: [e.g. iOS15.5]

    Additional context Add any other context about the problem here.

    opened by Mahekaru 0
  • Add toggle to present and dismiss tooltip on demand

    Add toggle to present and dismiss tooltip on demand

    What

    This change updates the tooltip api to allow on demand presentation and dismissal of the tooltip. Addresses feature request: https://github.com/quassum/SwiftUI-Tooltip/issues/20

    Changes

    • Add isEnabled: Binding<Bool> to TooltipModifier and update the tooltip View extension api to include isEnabled
    • Remove implicit .animation(.easeInOut) in favor of .transition to allow developers the option to present and dismiss with animations.

    Example

    https://user-images.githubusercontent.com/729622/164873492-5a1ae5e3-c963-4d29-b667-c0f7557eaa6b.mp4

    enhancement 
    opened by chenium 0
  • Borders not appearing correctly

    Borders not appearing correctly

    The tooltip isn't displaying correctly. I've reproduced the bug with just the default SwiftUI app. For context, I'm on iOS 16.

    Code: Screen Shot 2022-09-24 at 7 52 21 AM

    Output: Screen Shot 2022-09-24 at 7 50 00 AM

    .topRight looks off as well.

    Screen Shot 2022-09-24 at 7 51 16 AM

    opened by Sourish07 2
Releases(v1.3.1)
  • v1.3.1(Dec 27, 2022)

    What's Changed

    • 27: Border not visible on self sized tooltip by @jsivanes in https://github.com/quassum/SwiftUI-Tooltip/pull/28

    New Contributors

    • @jsivanes made their first contribution in https://github.com/quassum/SwiftUI-Tooltip/pull/28

    Full Changelog: https://github.com/quassum/SwiftUI-Tooltip/compare/v1.3...v1.3.1

    Source code(tar.gz)
    Source code(zip)
  • v1.3(Aug 28, 2022)

    What's Changed

    • Misc fixes by @bring-shrubbery in https://github.com/quassum/SwiftUI-Tooltip/pull/26

    Full Changelog: https://github.com/quassum/SwiftUI-Tooltip/compare/v1.2.0...v1.3

    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Apr 26, 2022)

    What's Changed

    • Add toggle to present and dismiss tooltip on demand by @chenium in https://github.com/quassum/SwiftUI-Tooltip/pull/21

    New Contributors

    • @chenium made their first contribution in https://github.com/quassum/SwiftUI-Tooltip/pull/21

    Full Changelog: https://github.com/quassum/SwiftUI-Tooltip/compare/v1.1.3...v1.2.0

    Source code(tar.gz)
    Source code(zip)
  • v1.1.3(Mar 21, 2022)

    What's Changed

    • Fixed background color artifact by @bring-shrubbery in https://github.com/quassum/SwiftUI-Tooltip/pull/18

    Full Changelog: https://github.com/quassum/SwiftUI-Tooltip/compare/v1.1.2...v1.1.3

    Source code(tar.gz)
    Source code(zip)
  • v1.1.2(Nov 10, 2021)

  • v1.1.1(Aug 2, 2021)

  • v1.1.0(Jul 15, 2021)

  • v1.0.4(Jul 15, 2021)

  • v1.0.3(Jul 13, 2021)

  • 1.0.2(Jul 3, 2021)

Owner
Quassum Manus
When you think about it, you’re just a liquid-cooled computer 😉
Quassum Manus
Lightbox is a convenient and easy to use image viewer for your iOS app

Lightbox is a convenient and easy to use image viewer for your iOS app, packed with all the features you expect: Paginated image slideshow. V

HyperRedink 1.5k Dec 22, 2022
AsyncImageExample An example project for AsyncImage. Loading images in SwiftUI article.

AsyncImageExample An example project for AsyncImage. Loading images in SwiftUI article. Note: The project works in Xcode 13.0 beta (13A5154h).

Artem Novichkov 4 Dec 31, 2021
SwiftUI project to show ActivityIndicator above Image while loading

ImageWithActivityIndicatorDemo SwiftUI project to show ActivityIndicator above Image while loading ImageWithActivityIndicatorDemo is a demo app that s

Ali Adam 4 May 27, 2021
Shows your photo library grouped by events, to easily export them to your computer

Groupir Shows your photo library grouped by events, to easily export them to your computer Features Currently supported features: reading your photo l

Stanislas Chevallier 0 Dec 15, 2021
GIFImage component for your SwiftUI app!

SwiftUI GIF Lightweight SwiftUI component for rendering GIFs from data or assets, with no external dependencies. As a bonus, there's an extension that

Gordan Glavaš 17 Dec 6, 2022
IconsMaker - Create your app icon with SwiftUI and generate PNG images in all needed sizes

IconsMaker - Create your app icon with SwiftUI and generate PNG images in all needed sizes

Jonathan Gander 14 Oct 20, 2022
Swift port of AnyPic project

SwiftAnyPic Swift port of AnyPic project https://github.com/ParsePlatform/Anypic Requirements This application requires Xcode 7 and the iOS SDK v9.0.

null 90 Nov 23, 2022
In our project we are interested in the manipulation of HSLA images

Projet 1 HSLA Images Réalisé par : Adil Erraad,Said El Ouardi Link to another page. HSLA Images Introduction Dans le cadre de notre projet nous nous s

null 0 Nov 7, 2021
Starter project for Mars rover photos iOS app.

MarzyPan is an app that allows users to view photos taken by Mars rovers during their time on the planet. This is a starter project that has some UI

Ruben Hansen-Rojas 0 Dec 30, 2021
AZS - There are two frameworks in the pod file, you need to install them to work with the project

AZS There are two frameworks in the pod file, you need to install them to work w

Nikita12G 0 Jan 14, 2022
AirPodsMotionAPI - Test Swift's AirPods Motion API in this sample project

AirPods Motion API Overview Swift provides an AirPods motion API that works on s

Pallav Agarwal 47 Dec 9, 2022
TQIBank - Project developed for iOS Acceleration in partnership with DIO (Digital Innovation One)

Projeto TQIBank Projeto desenvolvido para Aceleração iOS em parceria com a DIO (

Roberth Diorges 6 Jul 4, 2022
VRTracerSample - Learning project in Metal Ray Tracing and Swift

VRTracer This is a personal project for learning Metal's Ray Tracing API with sw

null 1 Feb 12, 2022
A smart and easy-to-use image masking and cutout SDK for mobile apps.

TinyCrayon SDK for iOS A smart and easy-to-use image masking and cutout SDK for mobile apps. TinyCrayon SDK provides tools for adding image cutout and

null 1.8k Dec 30, 2022
Swifttty and easy camera framework for iOS.

SwiftttCamera Swifttty and easy camera framework for iOS. View Demo · Report Bug · Request Feature SwiftttCamera is a wrapper around AVFoundation that

Roger Oba 13 Sep 14, 2022
TRex 🦖 TRex makes OCR easy and accessible on a Mac

TRex ?? TRex makes OCR easy and accessible on a Mac. But what is OCR anyway? Imagine you have a PDF file or a Web page where you can't select the text

Ameba Labs 700 Dec 23, 2022
URLImage is a package that holds an easy way of showing images from an URL.

URLImage Overview URLImage is a package that holds an easy way of showing images from an URL. Usually this processes should take the following process

Ramón Dias 1 Nov 1, 2021
Very easy to use image loader for swift

Silo Silo is a extremely easy to use and very basic image loader for iOS built in Swift. if you use Silo in your project please let me know! Version 2

Jose Quintero 17 Dec 17, 2022
Easy customizable avatar image asynchronously with progress bar animated

JDSwiftAvatarProgress ##Objective-C JDAvatarProgress is available in Objective-C also, JDAvatarProgress Usage To run the example project, clone the re

Jelly Development 86 May 16, 2022