jesualex / stooltip

A simple Tooltip Library

sTooltip

sTooltip is a simple Tooltip flexible and self-adjusting kotlin Library for Android.

Examples:

Easy Use:

            Tooltip.on(exampleTextView)
                .text(R.string.example)
                .icon(android.R.drawable.ic_dialog_info)
                .iconSize(30, 30)
                .color(resources.getColor(R.color.colorPrimary))
                .border(Color.BLACK, 1f)
                .clickToHide(true)
                .corner(5)
                .position(Position.TOP)
                .show(3000)

Step 1. Add it in your root build.gradle at the end of repositories:

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}

Step 2. Add the dependency

dependencies {
	implementation 'com.github.luisvasquez:sTooltip:Tag'
}

Options

Initialization of Builder

For your convenience, you can initialize the constructor only using the view to which you want the tooltip to refer, in that case the tooltip will be attached to the decorView(OVER ALL VIEWS), you can also optionally define with a bool if you want to close the tooltip as soon as the referenced view has been detached, by default it comes true.

Tooltip.on(View)
Tooltip.on(View, Bool)

Builder options

Once the builder has been initialized, you can configure your tooltip, below you can briefly see the different methods you can use for that config

• To set text
  builder.text(text)

• To set text color
  builder.textColor(colorInt)

• To set text typeface
  builder.textTypeFace(typeface)

• To set text size
  builder.textSize(textSize)
builder.textSize(unit, textSize)

• To set text gravity
  builder.textGravity(TextViewGravity)

• To set text lineHeight builder.lineHeight(lineSpacingExtra, lineSpacingMultiplier)

• To enable a start icon(by default disabled)
  builder.iconStart(icon)

• To set the start icon margin in px
  builder.iconStartMargin(left, top, right, bottom)

• To set the start icon size in px
  builder.iconStartSize(h, w)

• To enable a end icon(by default disabled)
  builder.iconEnd(icon)

• To set the end icon margin in px
  builder.iconEndMargin(left, top, right, bottom)

• To set the end icon size in px
  builder.iconEndSize(h, w)

• To set a top drawable
  builder.drawableTop(drawable)

• To set a bottom drawable
  builder.drawableBottom(drawable)

• To set the tooltip bubble color
  builder.color(color)

• To set the tooltip content padding in px
  builder.padding(top, right, bottom, left)

• To set the position of the tooltip in relation to the view to which it points(by deafult Bottom)
  builder.position(position)

• To set the corner radius in px of the tooltip bubble
  builder.corner(radius)

• To enable autohide on tap(by default is enabled)
  builder.clickToHide(bool)

• To set the distance in px between the tooltip and the view to which it points
  builder.distanceWithView(distance)

• To set the the border color and width in px
  builder.border(color, width)

• To set the the border margin in px
  builder.border(margin)

• To enable and set a bubble shadow(by default bubble shadow radius is 0, it means shadow disabled)
  builder.shadow(radius)
builder.shadow(radius, color)

• To set shadow padding
  builder.shadow(padding)

• To set the arrow size
  builder.arrowSize(h, w)

• To set a tooltip minWidth in px if the space in parent isn't enough the tooltip will be relocated to the opposite position
  builder.minWidth(w)

• To set a tooltip minHeight in px if the space in parent isn't enough the tooltip will be relocated to the opposite position
  builder.minHeight(w)

• To set a tooltip show/hide animation
  builder.animation(anim)
builder.animation(animIn, animOut)

• To set a lifecycle listener to know when the tooltip has showed or hidden
  builder.displayListener(listener)

• To set a click listener to catch when the user click the tooltip
  builder.tooltipClickListener(listener)

• To set a click listener to catch when the user click the view to which the tooltip points
  builder.refViewClickListener(listener)

• To enable overlay function and set a listener to catch when the user click the overlay(by default the overlay click has disabled, it means that if the user clicks in the overlay, that click will be send to the view under the overlay)
  builder.overlay(color)
builder.overlay(color, listener)

Show options

After configure your tooltip just left show it, if you want set a duration in millis and the tooltip will be autohide after that time(by default autohide is disabled)

builder.show()
builder.show(duration)

This show method return a Tooltip instance, with which you can close, and show it again. If you call show before close, the tooltip will make a closeNow() and it will be shown again.

• To close the tooltip with animation
  tooltip.close()

• To close the tooltip without animation
  tooltip.closeNow()

• To show the tooltip again
  tooltip.show()
tooltip.show(duration)
tooltip.show(text)
tooltip.show(duration, text)

• To know if tooltip if currently shown
  tooltip.isShown(): Boolean

Example

To get a small example, please download this repo and execute it

Thanks to:

• makks129 for tooltip screenshots

stooltip's Issues

Adjustment and arrow position issue when using custom root view

Hey Jesus

One more thing I'm struggling with:
I'm using custom rootView fun on(refView: View, rootView: View? = null): TooltipBuilder constructor (CardView is the rootView on this screenshot) and there are 2 issues:

1. The tooltip doesn't adjust itself properly and gets cut off
2. The arrow should be in the middle of "7 palabras" TextView, as I use it as a refView

It looks like it's just not calculating the position of the tooltip properly (maybe due to some margins or something?) and hence we have these 2 problems.
Do you think you can fix that?

Thanks, appreciate your work.

Tooltip with Vertical orientation of TextView and Icon

Hi, I would like to use this tooltip but only is in Horizontal orientation. Is there any way to change to Vertical orientation in order to show TextView and below the Icon?
Thanks

Support for RTL languages

Hi, thanks for writing this lib. I was planning to use in my app because it's really straightforward to use, but I just found that the tooltips won't work well when the phone is set to Hebrew (and probably to other RTL languages). I hope you can fix it soon.

Cheers.

Bruno.

Unable to adjust line spacing

Right now there is no public api to adjust the line spacing in the textviews.

Is there a way to hide the tooltip upon tapping anywhere in the screen?

Instead of having to tap the actual tooltip to dismiss it, I'd like to be able to hide the tooltip upon tapping any part of the screen.

Check for multiple show() calls and/or provide isShown() method

Currently calling show() twice throws an exception.
It would be nice to have if (!isShown()) show() check or simply to provide an isShown() method so we could perform this check manually. (Same logic with close)

Thanks, Jesus, this library is awesome!

Arrow don't align to refView

When tooltip width very large, example == screen width, the arrow aways on center of tooltip, if refView not center in window, arrow will not align center to refView.

Proposal solutions:

1. arrow position flow on tooltip to align to refView
2. provide set tooltip window width method

Tooltip is not close on list scroll

I have open tooltip on click of list item in list Adapter but now problem is that, on scrolling it is not hiding.
Please help to resolved this issue.