how to display ToolTip in android?

Question

I want to display the ToolTip(QuickAction View) when I am moving my cursor on the view. Can any one please give me the simple example for it? tooltip will only contains the text value.

See [my answer](http://stackoverflow.com/a/28561462/319954) on another similar question. — Mansour, Feb 17 '15 at 12:27
@Mansour I've used a similar approach in my answer: http://stackoverflow.com/a/42003384/1617737 — ban-geoengineering, Feb 02 '17 at 13:24
There is a built in method to do so. Check [this](https://stackoverflow.com/a/51936412/7594961) post — Bertram Gilfoyle, Aug 21 '18 at 04:49

score 36 · Answer 1 · answered Nov 14 '17 at 13:04

Possibly using myView.setTooltipText(CharSequence) (from API-level 26) or TooltipCompat (prior to API-level 26) is an additonal option:

TooltipCompat.setTooltipText(myView, context.getString(R.string.myString));

Documentation says:

Helper class used to emulate the behavior of {@link View#setTooltipText(CharSequence)} prior to API level 26.

Darish · Answer 2 · 2020-05-02T04:39:00.473

Using AndroidX is the recommended way.

Android 4.0 (API 14) and higher

AndroidX support Library added support for tooltips (small popup windows with descriptive text) for views and menu items.

Use setTooltipText to set the tooltip text which will be displayed in a small popup next to the view.

See the following example:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
TooltipCompat.setTooltipText(fab, "Send an email");

The tooltip will be displayed:

On long click, unless it is handled otherwise (by OnLongClickListener or a context menu).
On hover, after a brief delay since the pointer has stopped moving

To add the Appcompat library into your project,

Open the build.gradle file for your application.

Add the support library to the dependencies section.

dependencies {

compile "androidx.appcompat:appcompat:1.1.0"
}

Android 8.0 (API level 26) and higher

If your minimum supported version is Android 8.0 (API level 26) and higher, you can specify the tooltip text in a View by calling the setTooltipText() method. You can also set the tooltipText property using the corresponding XML.

To specify the tooltip text in your XML files, set the android:tooltipText attribute, as shown in the following example:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:tooltipText="Send an email" />

To specify the tooltip text in your code, use the setTooltipText(CharSequence) method, as shown in the following example:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setTooltipText("Send an email");

score 20 · Accepted Answer · answered Aug 16 '12 at 09:24

20

Android supports "tool-tip" only for ActionBar buttons from Android 4.0 on. But as Jaguar already mentioned, tool-tips in Android doesnt make so much sense, since there is no concept of hovering.

From Android 4.0 the normal title text (that you set in the xml file or via code) will appear if you make a long click on the button. But if enough space is on the screen, it will be visible in the ActionBar all the time beside the icon.

If you want to have it for a custom view, you need to implement it yourself by adding a LongClickListener to your view, and show a Toast when pressed long:

view.setOnLongClickListener(new OnLongClickListener() {
    public boolean onLongClick(View v) {
        Toast.makeText(v.getContext(), "My tool-tip text", Toast.LENGTH_SHORT).show();
        return true;
    }
}

Of course you should use a resource for the string, and not the hard coded string.

answered Aug 16 '12 at 09:24

Tim Roes

1,406
1
12
22

1

Will this toast message comes below the view where we long clicked ? – John Nov 14 '13 at 05:17
2

@John: Using the Toast class, it will appear centered at the bottom of the screen. Using the title text on menu buttons the text appears directly below them. – Tim Roes Nov 14 '13 at 09:22
Thanks for the code. This really should be a standard convention in Android, shouldn't it? Love material design but those UI designer guys are so *scattered*. A suggestion: code should use getContentDescription(), xml should use android:contentDescription, and then you've addressed accessibility at the same time. – Robin Davies Nov 26 '15 at 15:04
On Chromebooks, which can run Android apps, the concept of hovering makes complete sense, and has been [implemented](https://developer.android.com/reference/android/view/View.OnHoverListener.html) since this answer was given. Keep in mind that [Chromebooks have huge market share in education](https://techcrunch.com/2017/04/27/as-chromebook-sales-soar-in-schools-apple-and-microsoft-fight-back/). – Dan Dascalescu Jul 18 '17 at 07:59

score 7 · Answer 4 · edited Jul 18 '17 at 08:08

7

Starting with Android API 14+, there is an event for hovering. You can do,

view.setOnHoverListener(...)

and listen for MotionEvents such as ACTION_HOVER_ENTER and ACTION_HOVER_EXIT, instead of onLongClick.

edited Jul 18 '17 at 08:08

Dan Dascalescu

143,271
52
317
404

answered Oct 29 '13 at 08:20

Mani.K

71
1
1

score 4 · Answer 5 · edited May 23 '17 at 12:02

Based on GregoryK's answer, I've created a new ImageButton class - see code below. To use it, all you need to do is replace the ImageButton in your layouts with com.yourpackage.ImageButtonWithToolTip and give it an android:contentDescription attribute (as that is the text that will be shown in the tool tip).

package com.yourpackage;

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Rect;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;

public class ImageButtonWithToolTip extends ImageButton {

    private static final int ESTIMATED_TOAST_HEIGHT_DIPS = 48;

    public ImageButtonWithToolTip(Context context) {
        super(context);
        init();
    }

    public ImageButtonWithToolTip(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ImageButtonWithToolTip(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @TargetApi(21)
    public ImageButtonWithToolTip(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init() {
        setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View view) {

                /**
                 * You should set the android:contentDescription attribute in this view's XML layout file.
                 */

                String contentDescription = getContentDescription().toString();

                if (TextUtils.isEmpty(contentDescription)) {

                    /**
                     * There's no content description, so do nothing.
                     */

                    return false; // Not consumed

                }
                else {

                    final int[] screenPos = new int[2]; // origin is device display
                    final Rect displayFrame = new Rect(); // includes decorations (e.g. status bar)
                    view.getLocationOnScreen(screenPos);
                    view.getWindowVisibleDisplayFrame(displayFrame);

                    final Context context = view.getContext();
                    final int viewWidth = view.getWidth();
                    final int viewHeight = view.getHeight();
                    final int viewCenterX = screenPos[0] + viewWidth / 2;
                    final int screenWidth = context.getResources().getDisplayMetrics().widthPixels;
                    final int estimatedToastHeight = (int) (ESTIMATED_TOAST_HEIGHT_DIPS
                            * context.getResources().getDisplayMetrics().density);

                    Toast toolTipToast = Toast.makeText(context, contentDescription, Toast.LENGTH_SHORT);
                    boolean showBelow = screenPos[1] < estimatedToastHeight;
                    if (showBelow) {
                        // Show below
                        // Offsets are after decorations (e.g. status bar) are factored in
                        toolTipToast.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL,
                                viewCenterX - screenWidth / 2,
                                screenPos[1] - displayFrame.top + viewHeight);
                    }
                    else {
                        // Show above
                        // Offsets are after decorations (e.g. status bar) are factored in
                        // NOTE: We can't use Gravity.BOTTOM because when the keyboard is up
                        // its height isn't factored in.
                        toolTipToast.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL,
                                viewCenterX - screenWidth / 2,
                                screenPos[1] - displayFrame.top - estimatedToastHeight);
                    }

                    toolTipToast.show();

                    return true; // Consumed

                }

            }

        });

    }

}

You can use the same approach for extending other views - for example, Button.

This code will generally show the tool tip **above** the ImageButtonWithToolTip - which I think is preferred as it means less chance of the user obscuring the tool tip with their finger/thumb. — ban-geoengineering, Feb 02 '17 at 13:26

score 3 · Answer 6 · answered Aug 16 '12 at 09:12

Android doesn't have tool tips. It is a touch-based UI. Current touch sensors can't generally detect hovering in a way that tool tips would be useful.

There's no concept of "hovering" in a touch screen, but you could set a LongClickListener for your View, and have a Toast appear after a long press.

GregoryK · Answer 7 · 2016-09-30T18:51:56.493

If you need to show tool tip for any view, you can use CheatSheet util class from Roman Nurik. (Uses Toast and optionally content description to show tooltip.)

It is

Android helper class for showing cheat sheets (tooltips) for icon-only UI elements on long-press. This is already default platform behavior for icon-only action bar items and tabs. This class provides this behavior for any other such UI element

score 3 · Answer 8 · edited May 02 '17 at 17:24

package com.nbfc.tekis.tooltipexample;

import android.support.v7.app.AppCompatActivity; import
android.os.Bundle; import android.view.View; import
android.widget.Button; import android.widget.GridView;

import it.sephiroth.android.library.tooltip.Tooltip;

public class MainActivity extends AppCompatActivity {
    /*Button button1,button2,button3,button4;*/

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void bottomTooltip(View view) {
        Button button1=(Button)findViewById(R.id.button1);
        Tooltip.make(this,new Tooltip.Builder()
            .anchor(button1, Tooltip.Gravity.BOTTOM)
            .closePolicy(new Tooltip.ClosePolicy()
            .insidePolicy(true,false)
            .outsidePolicy(true,false),4000)
            .activateDelay(900)
            .showDelay(400)
            .text("Android tooltip bottom")
            .maxWidth(600)
            .withArrow(true)
            .withOverlay(true)
            .build())
            .show();
    }

    public void topTooltip(View view) {
        Button button3=(Button)findViewById(R.id.button3);
        Tooltip.make(this,new Tooltip.Builder()
            .anchor(button3, Tooltip.Gravity.TOP)
            .closePolicy(new Tooltip.ClosePolicy()
            .insidePolicy(true,false)
            .outsidePolicy(true,false),4000)
            .activateDelay(900)
            .showDelay(400)
            .text("Android tooltip top")
            .maxWidth(600)
            .withOverlay(true)
            .withArrow(true)
            .build())
            .show();
    }

    public void rightTooltip(View view) {
        Button button2=(Button)findViewById(R.id.button2);
        Tooltip.make(this,new Tooltip.Builder()
            .anchor(button2, Tooltip.Gravity.RIGHT)
            .closePolicy(new Tooltip.ClosePolicy()
            .insidePolicy(true,false)
            .outsidePolicy(true,false),4000)
            .activateDelay(900)
            .showDelay(400)
            .text("Android tooltip right")
            .maxWidth(600)
            .withArrow(true)
            .withOverlay(true)
            .build())
            .show();
    }

    public void leftTooltip(View view) {
        Button button4=(Button)findViewById(R.id.button4);
        Tooltip.make(this,new Tooltip.Builder()
            .anchor(button4, Tooltip.Gravity.LEFT)
            .closePolicy(new Tooltip.ClosePolicy()
            .insidePolicy(true,false)
            .outsidePolicy(true,false),4000)
            .text("Android tooltip left")
            .maxWidth(600)
            .withArrow(true)
            .withOverlay(true)
            .build())
            .show();
    } 
}

score 1 · Answer 9 · answered Jun 04 '19 at 15:17

1

add this to your button

android:tooltipText="Tooltip text goes here"

answered Jun 04 '19 at 15:17

Dushyanth Kandiah

546
7
12

Adding this to a nested View will prevent its onClick event from propagating up to the parent View. Something to consider when dealing with recyclerView – lasec0203 Mar 31 '21 at 03:01

score 1 · Answer 10 · answered Aug 29 '19 at 19:54

Based on ban's Answer, I've created this method.

It does not assume anything about the toast size. Simply places the tool tip gravity based on where the view is relative to the window (i.e. left/right/above/below the center of the window). The toast always starts from center of the view and will stretch towards the right/left/bottom/top respectively.

See Example

private static void setToastGravity(View view, Toast toast) {
    final Rect viewRect = new Rect(); // view rect
    final Rect windowRect = new Rect(); // window rect
    view.getGlobalVisibleRect(viewRect);
    view.getWindowVisibleDisplayFrame(windowRect);

    int offsetX;
    int offsetY;
    int gravityX;
    int gravityY;

    if (viewRect.centerY() > windowRect.centerY()) {
        // above
        offsetY = windowRect.bottom - viewRect.centerY();
        gravityY = Gravity.BOTTOM;
    } else {
        // tooltip below the view
        offsetY = viewRect.centerY() - windowRect.top;
        gravityY = Gravity.TOP;
    }

    if (viewRect.centerX() > windowRect.centerX()) {
        // tooltip right of the view
        offsetX = windowRect.right - viewRect.centerX();
        gravityX = Gravity.END;
    } else {
        // tooltip left of the view
        offsetX = viewRect.centerX() - windowRect.left;
        gravityX = Gravity.START;
    }

    toast.setGravity(gravityX | gravityY, offsetX, offsetY);
}

score 1 · Answer 11 · answered Feb 24 '21 at 07:56

https://github.com/skydoves/Balloon

This library provides a lightweight, popup like tooltips, fully customizable with an arrows and animations. 100% Kotlin with all necessary documentation. It is actively being managed as well.

Here are some gif from their page;

another,

score 0 · Answer 12 · answered Sep 17 '19 at 04:48

I will Happy to help you

Please sir Try this -> android-simple-tooltip

I hope that will work for you

Example : Release Add it in your root build.gradle at the end of repositories:

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

Add the dependency

dependencies {
    implementation 'com.github.douglasjunior:android-simple-tooltip:0.2.3'
}

Add this code in your MainActivity class and make an object for your view which will you want to bind with tooltip

View yourView = findViewById(R.id.your_view);

    new SimpleTooltip.Builder(this)
        .anchorView(yourView)
        .text("Texto do Tooltip")
        .gravity(Gravity.END)
        .animated(true)
        .transparentOverlay(false)
        .build()
        .show();

how to display ToolTip in android?

12 Answers12

Using AndroidX is the recommended way.

Linked