CODEWITHSUNDEEP
android
Thiru
Thiru

Reputation: 2394

how to display ToolTip in android?

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.

Upvotes: 33

Views: 81202

Answers (12)

Sabeeh
Sabeeh

Reputation: 1263

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;

e

another,

e

Upvotes: 1

Darish
Darish

Reputation: 11481

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,

  1. Open the build.gradle file for your application.

  2. 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");

Upvotes: 24

yash shekhada
yash shekhada

Reputation: 13

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();

enter image description here

Upvotes: 0

ren
ren

Reputation: 21

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);
}

Upvotes: 1

Dushyanth Kandiah
Dushyanth Kandiah

Reputation: 716

add this to your button

android:tooltipText="Tooltip text goes here"

Upvotes: 1

Danny
Danny

Reputation: 1303

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.

Upvotes: 37

Mani.K
Mani.K

Reputation: 71

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.

Upvotes: 7

kartheek134
kartheek134

Reputation: 31

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();
    } 
}

Upvotes: 3

Boycott A.I.
Boycott A.I.

Reputation: 18871

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.

Upvotes: 4

GregoryK
GregoryK

Reputation: 3091

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

Upvotes: 3

Tim Roes
Tim Roes

Reputation: 1414

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.

Upvotes: 19

Jainendra
Jainendra

Reputation: 25143

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.

Upvotes: 3

Related Questions