Giter Club home page Giter Club logo

tooltip's Introduction

Tooltip

This is a lightweight library to show Tooltips dynamically in your app. This tooltip does not require any custom layout. It works out of the box with all the layouts.

Here's a short gif showing how it works.

Demo

Tooltip.Builder

Tooltip uses Builder pattern to created immutable Tooltips.

Usage

Tooltip tooltip = new Tooltip.Builder(contenxt)
                    .anchor(anchorView, Tooltip.BOTTOM)
                    .content(contentView)
                    .into(root)
                    .withTip(new Tip(tipWidth, tipHeight, tipColor))
                    .show();

That's it. It's that simple. You can customize the size and color of the tip to match color of the content view.

How To Install

JCenter / Bintray (Deprecated)

Maven
repositories {
    maven {
        url  "http://dl.bintray.com/jayrambhia/maven"
    }
}
JCenter
repositories {
    jcenter()
}
Dependency
dependencies {
    implementation 'com.fenchtose:tooltip:0.1.6'
}

JitPack

repositories {
    maven {
        url  "https://jitpack.io"
    }
}

dependencies {
    implementation 'com.github.jayrambhia:Tooltip:0.1.7-1'
}

Useful Methods:

  • anchor(View view) - set anchor view with position as Tooltip.TOP
  • anchor(View view, @Position int position) - set anchor view with position
  • content(View view) - set content view of the tooltip
  • animate(@NonNull TooltipAnimation animation) - set Animation for Show and Dismiss
  • withTip(@NonNull Tip tip) - set Tip of the tooltip.
  • into(ViewGroup viewGroup) - set ViewGroup into which the tip is to be shown
  • autoAdjust(boolean adjust) - if you want the tooltip to adjust itself if going out of bound
  • cancelable(boolean cancelable) - if you want the tooltip to dismiss automatically if clicked outside. Default is true
  • withPadding(int padding) - distance from the anchor and screen boundaries
  • autoCancel(int timeInMS) - if tooltip should be dismissed automatically after given time. If value is <= 0, auto cancel is off
  • withListener(@NonNull Listener listener) - Attach dismiss listener.
  • debug(boolean debug) - Enable debugging mode. Default is false.
  • checkForPreDraw(boolean check) - Check if the anchor is drawn or not and then only draw the tooltip

Tip

Tip is drawn as an isosceles triangle. The length of the base is defined by width and perpendicular length between top vertex and base is defined by height.

  • width - length of the base of isosceles triangle
  • height - length of the perpendicular from top vertex to the base
  • color - Color of the tip
  • tipRadius - Corner radius of the tip

TooltipAnimation

TooltipAnimation just holds type of the animation to be performed and duration of the animation

  • type - Type of animation - FADE, SCALE, REVEAL, SCALE_AND_FADE
  • duration - Animation duration in milliseconds
  • hideContentWhileAnimating - Content of the tooltip will be hidden when it's animating in or out. This will not work if the content is a View and not a ViewGroup.

Animations are a bit tricky in this library. FADE and REVEAL are applied on the container of the tooltip with appropriate parameters. So if the container has some background color, it looks really weird. The same method can't be applied for SCALE because it doesn't draw the tooltip properly. So in SCALE, the animation is applied on Tooltip's content view (and if tip is present, it will be there as it is not part of the content view). To avoid this eye sore, you may use SCALE_AND_FADE, it does SCALE and FADE so the poor effect is not visible.

REVEAL uses Circular Reveal and hence is supported for API 21 and above.

CoordinatorLayout and Anchored Views

When a view(eg. FAB) is anchored to another view in the CoordinatorLayout and you try to draw a tooltip as that view as anchor, it doesn't work properly. I'm assuming that CoordinatorLayout first draws fab and them moves? I don't know. Anyway, an onPreDrawListener listener has been added and once the event is received, tooltip is laid out. By default, this method is not performed. To perform this method, use checkForPreDraw(true) while creating the builder.

Future Work

  • Customizable tips
  • Shadow
  • Improve and add more animations

Licenses and Release History

CHANGELOG

NoCropper binaries and source code can be used according to the Apache License, Version 2.0.

tooltip's People

Contributors

audriuskv avatar jayrambhia avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

tooltip's Issues

Goes to click event on outside touch.

I am using it on google map to show address. So I don't want it to get dismissed when I touch on map. But I want it to be dismissed when tool tip is clicked.

View is getting disappeared while click on icon

I used Tooltip.builder() in Fragment but when I click on ImageView it shows and after showing whole it gets disappeared in just a second? Please suggest me.

Please find logs here:
2020-05-06 16:36:19.390 25288-25288/com.ikea.tradfri.lighting I/Tooltip: child layout: left: 435 top: -759 right: 794 bottom: -682
2020-05-06 16:36:19.391 25288-25288/com.ikea.tradfri.lighting I/Tooltip: px: 767, py: -771
2020-05-06 16:36:19.392 25288-25288/com.ikea.tradfri.lighting D/Tooltip: anchor point: 767, -771
2020-05-06 16:36:19.392 25288-25288/com.ikea.tradfri.lighting D/Tooltip: size: 359, 77
2020-05-06 16:36:51.415 25288-25288/com.ikea.tradfri.lighting I/Tooltip: l: 0, t: 849, r: 824, b: 849
2020-05-06 16:36:51.447 25288-25288/com.ikea.tradfri.lighting I/Tooltip: onPreDraw: 940, 595
2020-05-06 16:36:51.447 25288-25288/com.ikea.tradfri.lighting D/Tooltip: anchor location: 940, 595
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: holder location: 188, 1402
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: child w: 359 h: 77
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: left: 752, top: -807
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: tip top Before: -807
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: tip top: -759
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: tip Move to: 767 -771
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: tip Line to: 761 -759
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: tip Line to: 773 -759
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: tip Line to: 767 -771
2020-05-06 16:36:51.449 25288-25288/com.ikea.tradfri.lighting I/Tooltip: child layout: left: 435 top: -759 right: 794 bottom: -682
2020-05-06 16:36:51.449 25288-25288/com.ikea.tradfri.lighting I/Tooltip: px: 767, py: -771
2020-05-06 16:36:51.451 25288-25288/com.ikea.tradfri.lighting D/Tooltip: anchor point: 767, -771
2020-05-06 16:36:51.452 25288-25288/com.ikea.tradfri.lighting D/Tooltip: size: 359, 77
2020-05-06 16:36:54.729 25288-25288/com.ikea.tradfri.lighting I/Tooltip: canvas w: 824, h: 0

private void showCustomTooltip(@nonnull View anchor) {

    @SuppressLint("InflateParams") View content = getLayoutInflater().inflate(R.layout.item_tooltip_view_1, null);
    Resources res = getResources();

    int tooltipPadding = res.getDimensionPixelOffset(R.dimen.tooltip_padding);
    int tooltipColor = ContextCompat.getColor(mBaseActivity, R.color.warning_text_color);
    int tipSizeSmall = res.getDimensionPixelSize(R.dimen.tip_dimen_small);
    int tipRadius = res.getDimensionPixelOffset(R.dimen.tip_radius);

    customTooltip = new Tooltip.Builder(getActivity())
            .anchor(anchor, Tooltip.BOTTOM)
            .animate(new TooltipAnimation(TooltipAnimation.SCALE_AND_FADE, 400))
            .autoAdjust(true)
            .withPadding(tooltipPadding)
            .withMargin(6)
            .content(content)
            .cancelable(true)
            .checkForPreDraw(true)
            .withTip(new Tooltip.Tip(tipSizeSmall, tipSizeSmall, tooltipColor))
            .into(mRootLayout)
            .debug(true)
            .show();
}

Manifest merger failed : Attribute application@allowBackup value=(false) from AndroidManifest.xml

I set android:allowBackup to false and then I run my project it says below message

Manifest merger failed : Attribute application@allowBackup value=(false) from AndroidManifest.xml:24:9-36
	is also present at [com.fenchtose:tooltip:0.1.5] AndroidManifest.xml:12:9-35 value=(true).
	Suggestion: add 'tools:replace="android:allowBackup"' to <application> element at AndroidManifest.xml:22:5-121:19 to override.

Tip Position

Is there any method where i can adjust a tip position ? Like if my button is on right corner up side then Tip start point ll generate on Right edge of the popup.??? OR its auto managed?

positioning with parameters?

Hi, i find your library very useful in comparison to the rest out there.

however, i want to add this to spannable, but it requires a rootview? so any work around on this, or if you could help.

another question, how do i pass position to tooltip anchor? could you guide on this please.

adjust tooltip position when Tooltip.TOP

Hi there,

Whenever i use the Tooltip.TOP attribute for positioning a tooltip above the view, there is always quite a bit of space underneath it. However when using Tooltip.BOTTOM, there is no space between the view and the tooltip. Is there a way to adjust the positioning?

I tried adjusting the margins of the Tooltip Viewgroup by getting a Tooltip instance from show() to move it up and down from it's initial position but to no avail.

Screenshot attached for more info.
screen shot 2018-09-26 at 15 42 43

In Fragment when I click on ImageView it shows and after showing it gets disappeared in just a second?

I used Tooltip.builder() in Fragment but when I click on ImageView it shows and after showing whole it gets disappeared in just a second? Please suggest me.

Please find logs here:
2020-05-06 16:36:19.390 25288-25288/com.ikea.tradfri.lighting I/Tooltip: child layout: left: 435 top: -759 right: 794 bottom: -682
2020-05-06 16:36:19.391 25288-25288/com.ikea.tradfri.lighting I/Tooltip: px: 767, py: -771
2020-05-06 16:36:19.392 25288-25288/com.ikea.tradfri.lighting D/Tooltip: anchor point: 767, -771
2020-05-06 16:36:19.392 25288-25288/com.ikea.tradfri.lighting D/Tooltip: size: 359, 77
2020-05-06 16:36:51.415 25288-25288/com.ikea.tradfri.lighting I/Tooltip: l: 0, t: 849, r: 824, b: 849
2020-05-06 16:36:51.447 25288-25288/com.ikea.tradfri.lighting I/Tooltip: onPreDraw: 940, 595
2020-05-06 16:36:51.447 25288-25288/com.ikea.tradfri.lighting D/Tooltip: anchor location: 940, 595
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: holder location: 188, 1402
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: child w: 359 h: 77
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: left: 752, top: -807
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: tip top Before: -807
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: tip top: -759
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: tip Move to: 767 -771
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: tip Line to: 761 -759
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: tip Line to: 773 -759
2020-05-06 16:36:51.448 25288-25288/com.ikea.tradfri.lighting D/Tooltip: tip Line to: 767 -771
2020-05-06 16:36:51.449 25288-25288/com.ikea.tradfri.lighting I/Tooltip: child layout: left: 435 top: -759 right: 794 bottom: -682
2020-05-06 16:36:51.449 25288-25288/com.ikea.tradfri.lighting I/Tooltip: px: 767, py: -771
2020-05-06 16:36:51.451 25288-25288/com.ikea.tradfri.lighting D/Tooltip: anchor point: 767, -771
2020-05-06 16:36:51.452 25288-25288/com.ikea.tradfri.lighting D/Tooltip: size: 359, 77
2020-05-06 16:36:54.729 25288-25288/com.ikea.tradfri.lighting I/Tooltip: canvas w: 824, h: 0

private void showCustomTooltip(@nonnull View anchor) {

@SuppressLint("InflateParams") View content = getLayoutInflater().inflate(R.layout.item_tooltip_view_1, null);
Resources res = getResources();

int tooltipPadding = res.getDimensionPixelOffset(R.dimen.tooltip_padding);
int tooltipColor = ContextCompat.getColor(mBaseActivity, R.color.warning_text_color);
int tipSizeSmall = res.getDimensionPixelSize(R.dimen.tip_dimen_small);
int tipRadius = res.getDimensionPixelOffset(R.dimen.tip_radius);

customTooltip = new Tooltip.Builder(getActivity())
        .anchor(anchor, Tooltip.BOTTOM)
        .animate(new TooltipAnimation(TooltipAnimation.SCALE_AND_FADE, 400))
        .autoAdjust(true)
        .withPadding(tooltipPadding)
        .withMargin(6)
        .content(content)
        .cancelable(true)
        .checkForPreDraw(true)
        .withTip(new Tooltip.Tip(tipSizeSmall, tipSizeSmall, tooltipColor))
        .into(mRootLayout)
        .debug(true)
        .show();

}

Cancel/remove tooltip when user touch on any parts of screen

When tooltip is visible and user click on any other part of the screen say user click on button and tooltip is visible and then user click on different button is any way we can cancel or remove tooltip instead of waiting for tooltip duration time to get over

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.