Skip to content

Repository files navigation

Note: This repository contains a port to C# of the original library, which is written in Swift.

NuGetBuild Status


EasyTipView: fully customisable tooltip view written in Swift

Description

EasyTipView is a fully customisable tooltip view that can be used as a call to action or informative tip.

Contents

  1. Features
  2. Installation
  3. Supported OS & SDK versions
  4. Usage
  5. Customising the appearance
  6. Customising the presentation and dismissal animations
  7. License
  • Can be shown pointing to any UIView subclass.
  • support for any arrow direction ←, →, ↑, ↓
  • Automatic orientation change adjustments.
  • Fully customisable appearance.
  • Fully customisable presentation and dismissal animations.

Nuget

Install-Package EasyTipView

Manually

If you prefer not to use either of the aforementioned dependency managers, you can integrate EasyTipView into your project manually.

  • Supported build target - iOS 8+ (Xcode 8)
  1. Install package into your application project
  2. Create a new EasyTipView control:
_myTooltip=newEasyTipView.EasyTipView();_myTooltip.Text=newFoundation.NSString("This is a tooltip sample!");_myTooltip.ArrowPosition=EasyTipView.ArrowPosition.Right;_myTooltip.DidDismiss+=(sender,e)=>{// do something on dismiss};_myButton1.TouchUpInside+=(sender,e)=>{_myTooltip.Show(_myButton1,this.View,true);};_myButton2.TouchUpInside+=(sender,e)=>{_myTooltip.Dismiss();};

As you can see from the example above, Show method takes three parameters:

  • View to which the tooltip will be anchored
  • Superview where the tooltip will be added on screen
  • Animated will display / hide the tooltip using animations

In order to customise the EasyTipView appearance and behaviour, you can play with the properties the widget exposes.

All customization possibilities can be splitted into three groups:

  • Drawing - Properties related to the way EastTipView will be drawn on screen.
  • Positioning - Properties related to the way EasyTipView will be drawn within its own bounds.
  • Animating - Properties that will tell EasyTipView how to animate itself on and off screen.

Drawing

PropertyTypeDefault valueDescription
CornerRadiusfloat5fThe corner radius of the tip view bubble.
ArrowHeightfloat5fThe height of the arrow positioned at the top or bottom of the bubble.
ArrowWidthfloat10fThe width of the above mentioned arrow.
ForegroundColorUIColorBlackThe text color.
BubbleColorUIColorRedThe background color of the bubble.
ArrowPositionArrowPositionArrowPosition.AnyThe position of the arrow. This can be:
+Top: on top of the bubble
+Bottom: at the bottom of the bubble.
+Left: on the left of the bubble
+Right: on the right of the bubble
+Any: use this option to let the EasyTipView automatically find the best arrow position.
If the passed in arrow cannot be applied due to layout restrictions, a different arrow position will be automatically assigned.
TextAlignmentUITextAlignmentUITextAlignment.CenterThe alignment of the text.
BorderWidthfloat0Width of the optional border to be applied on the bubble.
BorderColorUIColorClearColor of the optional border to be applied on the bubble. In order for the border to be applied, BorderColor needs to be different that UIColor.Clear and BorderWidth > 0
FontUIFontUIFont.SystemFontOfSize(15f)Font to be applied on the text.

Positioning

PropertyTypeDefault valueDescription
BubbleHInsetfloat1fHorizontal bubble inset witin its container.
BubbleVInsetfloat1fVertical bubble inset within its container.
TextHInsetfloat10fText horizontal inset within the bubble.
TextVInsetfloat10fText vertical inset within the bubble.
MaxWidthfloat200fMax bubble width.

Animating

PropertyTypeDefault valueDescription
DismissTransformCGAffineTransformCGAffineTransform.MakeScale(0.1f, 0.1f)CGAffineTransform specifying how the bubble will be dismissed.
ShowInitialTransformCGAffineTransformCGAffineTransform.MakeScale(0f, 0f)CGAffineTransform specifying the initial transform to be applied on the bubble before it is animated on screen.
ShowFinalTransformCGAffineTransformCGAffineTransform.MakeIdentity()CGAffineTransform specifying how the bubble will be animated on screen.
SpringDampingfloat0.7fSpring animation damping.
SpringVelocityfloat0.7fSpring animation velocity.
ShowInitialAlphafloat0Initial alpha to be applied on the tip view before it is animated on screen.
DismissFinalAlphafloat0The alpha to be applied on the tip view when it is animating off screen.
ShowDurationfloat0.7fShow animation duration.
DismissDurationfloat0.7fDismiss animation duration.
DismissOnTapbooltruePrevents view from dismissing on tap if it is set to false.

The default animations for showing or dismissing are scale up and down. If you want to change the default behaviour, you need to change some animating attributes. An example could be:

DismissTransform=CGAffineTransform.MakeTranslation(0,-15);ShowInitialTransform=CGAffineTransform.MakeTranslation(0,-15);ShowInitialAlpha=0f;ShowDuration=1.5f;DismissDuration=1.5f;

This produces the following animations:

EasyTipView is released under the MIT license. See the LICENSE file for details.

Logo was created using Bud Icons Launch graphic by Budi Tanrim from FlatIcon which is licensed under Creative Commons BY 3.0. Made with Logo Maker.

About

C# port of https://github.com/teodorpatras/EasyTipView. EasyTipView is a fully customisable tooltip view for iOS.

Topics

Resources

Stars

70 stars

Watchers

2 watching

Forks

Releases

Packages

Used by

Contributors

Languages