C# port of https://github.com/teodorpatras/EasyTipView. EasyTipView is a fully customisable tooltip view for iOS.
C#
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Artwork
EasyTipView
EasyTipViewSample
.gitignore
EasyTipView.sln
LICENSE.md
README.md

README.md

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

NuGet Build 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

Features

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

Installation

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 OS & SDK Versions

  • Supported build target - iOS 8+ (Xcode 8)

Usage

  1. Install package into your application project
  2. Create a new EasyTipView control:
_myTooltip = new EasyTipView.EasyTipView();
_myTooltip.Text = new Foundation.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

Customising the appearance

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

Property Type Default value Description
CornerRadius float 5f The corner radius of the tip view bubble.
ArrowHeight float 5f The height of the arrow positioned at the top or bottom of the bubble.
ArrowWidth float 10f The width of the above mentioned arrow.
ForegroundColor UIColor Black The text color.
BubbleColor UIColor Red The background color of the bubble.
ArrowPosition ArrowPosition ArrowPosition.Any The 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.
TextAlignment UITextAlignment UITextAlignment.Center The alignment of the text.
BorderWidth float 0 Width of the optional border to be applied on the bubble.
BorderColor UIColor Clear Color 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
Font UIFont UIFont.SystemFontOfSize(15f) Font to be applied on the text.

Positioning

Property Type Default value Description
BubbleHInset float 1f Horizontal bubble inset witin its container.
BubbleVInset float 1f Vertical bubble inset within its container.
TextHInset float 10f Text horizontal inset within the bubble.
TextVInset float 10f Text vertical inset within the bubble.
MaxWidth float 200f Max bubble width.

Animating

Property Type Default value Description
DismissTransform CGAffineTransform CGAffineTransform.MakeScale(0.1f, 0.1f) CGAffineTransform specifying how the bubble will be dismissed.
ShowInitialTransform CGAffineTransform CGAffineTransform.MakeScale(0f, 0f) CGAffineTransform specifying the initial transform to be applied on the bubble before it is animated on screen.
ShowFinalTransform CGAffineTransform CGAffineTransform.MakeIdentity() CGAffineTransform specifying how the bubble will be animated on screen.
SpringDamping float 0.7f Spring animation damping.
SpringVelocity float 0.7f Spring animation velocity.
ShowInitialAlpha float 0 Initial alpha to be applied on the tip view before it is animated on screen.
DismissFinalAlpha float 0 The alpha to be applied on the tip view when it is animating off screen.
ShowDuration float 0.7f Show animation duration.
DismissDuration float 0.7f Dismiss animation duration.
DismissOnTap bool true Prevents view from dismissing on tap if it is set to false.

Customising the presentation or dismissal animations

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:

License

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.