kcrimi / tooltipdialog

Easy to use library to add tooltips to your app

ToolTipDialog

An easy-to-use dialog to add tooltips to your app with teh ability to point to specific screen locations and also highlight views on-screen.

Great for on-boarding, calling out new features, or simply calling out bits of UI.

Features

• Show a default dialog pop up banner
• Align the dialog to a certain vertical location on screen
• Point to a specific element on-screen
• Highlight specific UI elements by letting them "peek through" a background shade

Gradle Setup

In your app's build.gradle add

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

dependencies {
    implementation 'com.github.kcrimi:ToolTipDialog:~1.1.4'
}

Note: the jitpack repository is not necessary if it already exists in allRepositories in the project's build.gradle.

Usage

The below are shown as called by an Activity

Basic

ToolTipDialog(this, this)
  .title("This is a basic dialog") // Define the title for the tooltip
  .content("This dialog will show at the top of the screen by default") // Body content 
  .subtitle("Subtitle for tooltip") // Subtitle on the tooltip
  .setToolTipListener(toolTipListener) // Define the listener for clicks on the tooltip
  .show() // Build and show the tooltip

Title, subtitle, and content text views are hidden unless you set the content for them.

If you wish to only use 1 line of text, you should prefer to use the title since this will be centered within the dialog box.

Vertically positioned

Great for underlining an element or section of you UI.

ToolTipDialog(this, this)
  ...
  .setYPosition(720) // Align the top of the dialog with this position on screen
  .show()

Point to specific location

You can also point to a specific point on screen. Great for calling out buttons and improving discoverability of buried features.

ToolTipDialog(this, this)
  ...
  .pointTo(250, 720) // Point to the specific X,Y position on-screen
  .show()

View the sample app for how to point to specific views.

Peek-through views

Draw a typical shade behind your dialog but let specific views peek through.

ToolTipDialog(this, this)
  ...
  .addPeekThroughView(myCoolButton)
  .show()

You can also add as many of these as you'd like

ToolTipDialog(this, this)
  ...
  .addPeekThroughView(myCoolButton)
  .addPeekThroughView(myOtherButton)
  .addPeekThroughView(myAwesomeImage)
  .show()

Custom styles

You can define a custom theme inheriting from ToolTipDialog, defining any of the following attributes for the styles you wish to override.

Eg changing fonts, colors, padding, margins, etc.

<style name="ToolTipDialogTheme.Custom">
        <item name="toolTipDialog.titleTextStyle">@style/custom_title_text</item>
        <item name="toolTipDialog.subtitleTextStyle">@style/custom_subtitle_text</item>
        <item name="toolTipDialog.bodyTextStyle">@style/custom_body_text</item>
        <item name="toolTipDialog.backgroundColor">@color/custom_background_color</item>
        <item name="toolTipDialog.dialogBoxStyle">@style/my_custom_dialog_box_style</item>
</style>

If you only want to make small tweaks, have your custom styles declare the stock styles as the parent.

Now you simply pass in this custom theme when creating a new ToolTipDialog

ToolTipDialog(this, this, R.style.TooltipDialogTheme_Custom)

FAQ

My view keeps saying it's at x:0, y:0, making the dialog to point to the wrong spot

You'll need to make sure that you let the system have time to inflate the layout or else the views won't have their proper sizes/dimenstions.

If you need to show the tooltip on an early lifecycle event like onCreate() or onViewCreated(), yout can usually solve this issue by adding an additional delay or, more reliably, adding a ViewTreeObserver.

contentView.viewTreeObserver.addOnGlobalLayoutListener(object: ViewTreeObserver.OnGlobalLayoutListener,
            ViewTreeObserver.OnGlobalFocusChangeListener {
            override fun onGlobalLayout() {
                contentView.viewTreeObserver.removeOnGlobalFocusChangeListener(this)
                // Show Dialog here
            }
            
            ...
        })

---

This project is licensed under the terms of the Apache 2.0 license.

tooltipdialog's Issues

How to cut title area when the title is an empty string

I want to design the tooltip but need to remove the space occupied by title, as i don't have any title in the tooltip.

val dialog =ToolTipDialog(requireContext(), requireActivity())
            .content(getString(R.string.tooltip_text))
            .subtitle("Create your first task")
            .setToolTipListener(toolTipListener)
            .pointTo(420, 1900)


        dialog.show()

Guide for JAVA ?

Many of us are still programming in Java on android.
It would be super helpful if you could Make a guide on JAVA.
I'm totally lost as to how to implement this.

Add customization of background and text color

I think two public methods to set the background and text colors would be essential.

Something like this to add to the chain of methods:

setTextColor()

setBackgroundColor()

Wasted few hours trying to import it propery.

Dude, this library wasted my few hours bcz even after importing the library poperly using jCenter, bintray, jitpack.

I Was unable to import the classes in the activity. Plz check.

Flattened tooltips on fullscreen apps

Whenever your application is displayed under statusBar, tooltips are flattened.

[BUG] addPeekThroughView dialog position

Describe the bug
I was looking at the sample here, and I have noticed that the addPeekThroughView add a new view in the wrong position.
I am using a Google Pixel 4a, OS 12.

To Reproduce
Steps to reproduce the behavior:

1. Go to Sample activity
2. Toggle shade on
3. Click on Pointing up
4. See error: The attached view is not in the same position of the original.

Expected behavior
The view in the dialog should be in the same xy position as the original one.

Screenshots

Additional context
Add any other context about the problem here.

Publish License Info

This library seems nice and might fit the need for a project that I am working on. However, I cannot find definitive information about the software license under which it is published:

• The Kotlin files do not have any sort of license header block
• I do not see a LICENSE file
• No licensing information is in the project README
• The Android Arsenal listing says it is GPLv3
• The bintray.gradle file says that it is Apache License 2.0

Ideally, it would be clearer what license you are publishing this library under, so we can make sure that we conform to your license requirements.

Thanks for considering this!