tomergoldst / tooltips Goto Github PK
View Code? Open in Web Editor NEWSimple to use library for android, enabling to add a tooltip near any view with ease
Simple to use library for android, enabling to add a tooltip near any view with ease
I followed this article to get this library working in xamarin forms: http://www.xamboy.com/2019/03/01/showing-tooltips-in-xamarin-forms
It works fine as long as I use static text, but as soon as I bind the text to a simple string property on my viewmodel the tooltip takes up way more space. Any ideas?
using System;
using Android.Views;
using Com.Tomergoldst.Tooltips;
using EvvMobileApp.Droid.Effects;
using EvvMobileApp.UI.Effects;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using static Com.Tomergoldst.Tooltips.ToolTipsManager;
[assembly: ExportEffect(typeof(TooltipEffectAndroid), nameof(TooltipEffect))]
namespace EvvMobileApp.Droid.Effects
{
class TooltipEffectAndroid : PlatformEffect
{
ToolTip toolTipView;
ToolTipsManager _toolTipsManager;
ITipListener listener;
public TooltipEffectAndroid()
{
listener = new TipListener();
_toolTipsManager = new ToolTipsManager(listener);
}
void OnTap(object sender, EventArgs e)
{
var control = Control ?? Container;
var text = TooltipEffect.GetText(Element);
if (!string.IsNullOrEmpty(text))
{
ToolTip.Builder builder;
var parentContent = control.RootView;
var position = TooltipEffect.GetPosition(Element);
switch (position)
{
case TooltipPosition.Top:
builder = new ToolTip.Builder(control.Context, control, parentContent as ViewGroup, text, ToolTip.PositionAbove);
break;
case TooltipPosition.Left:
builder = new ToolTip.Builder(control.Context, control, parentContent as ViewGroup, text, ToolTip.PositionLeftTo);
break;
case TooltipPosition.Right:
builder = new ToolTip.Builder(control.Context, control, parentContent as ViewGroup, text, ToolTip.PositionRightTo);
break;
default:
builder = new ToolTip.Builder(control.Context, control, parentContent as ViewGroup, text, ToolTip.PositionBelow);
break;
}
builder.SetAlign(ToolTip.AlignLeft);
builder.SetBackgroundColor(TooltipEffect.GetBackgroundColor(Element).ToAndroid());
builder.SetTextColor(TooltipEffect.GetTextColor(Element).ToAndroid());
toolTipView = builder.Build();
_toolTipsManager?.Show(toolTipView);
}
}
protected override void OnAttached()
{
var control = Control ?? Container;
control.Click += OnTap;
}
protected override void OnDetached()
{
var control = Control ?? Container;
control.Click -= OnTap;
_toolTipsManager.FindAndDismiss(control);
}
class TipListener : Java.Lang.Object, ITipListener
{
public void OnTipDismissed(Android.Views.View p0, int p1, bool p2)
{
}
}
}
}
<Button FontSize="Medium"
Grid.Column="3"
effects:TooltipEffect.Position="Left"
effects:TooltipEffect.BackgroundColor="Silver"
effects:TooltipEffect.TextColor="Teal"
effects:TooltipEffect.Text="{Binding ScheduledShift.SupervisorNotes}"
effects:TooltipEffect.HasTooltip="True"
Margin="0"
Padding="0"
Text="{x:Static fontawesome:FontAwesomeIcons.StickyNote}"
IsVisible="{Binding ScheduledShift.SupervisorNotes, Converter={StaticResource NullOrEmptyReturnsFalseBooleanConverter}}"
FontFamily="{StaticResource FontAwesomeSolid}"
TextColor="{StaticResource AlternateAccentText}"></Button>
using System.Linq;
using Xamarin.Forms;
namespace EvvMobileApp.UI.Effects
{
public enum TooltipPosition
{
Left = 0,
Top = 1,
Right = 2,
Bottom = 3
}
public static class TooltipEffect
{
public static readonly BindableProperty HasTooltipProperty =
BindableProperty.CreateAttached("HasTooltip", typeof(bool), typeof(TooltipEffect), false, propertyChanged: OnHasTooltipChanged);
public static readonly BindableProperty TextColorProperty =
BindableProperty.CreateAttached("TextColor", typeof(Color), typeof(TooltipEffect), Color.White);
public static readonly BindableProperty BackgroundColorProperty =
BindableProperty.CreateAttached("BackgroundColor", typeof(Color), typeof(TooltipEffect), Color.Black);
public static readonly BindableProperty TextProperty =
BindableProperty.CreateAttached("Text", typeof(string), typeof(TooltipEffect), string.Empty);
public static readonly BindableProperty PositionProperty =
BindableProperty.CreateAttached("Position", typeof(TooltipPosition), typeof(TooltipEffect), TooltipPosition.Bottom);
public static bool GetHasTooltip(BindableObject view)
{
return (bool)view.GetValue(HasTooltipProperty);
}
public static void SetHasTooltip(BindableObject view, bool value)
{
view.SetValue(HasTooltipProperty, value);
}
public static Color GetTextColor(BindableObject view)
{
return (Color)view.GetValue(TextColorProperty);
}
public static void SetTextColor(BindableObject view, Color value)
{
view.SetValue(TextColorProperty, value);
}
public static Color GetBackgroundColor(BindableObject view)
{
return (Color)view.GetValue(BackgroundColorProperty);
}
public static void SetBackgroundColor(BindableObject view, Color value)
{
view.SetValue(BackgroundColorProperty, value);
}
public static string GetText(BindableObject view)
{
return (string)view.GetValue(TextProperty);
}
public static void SetText(BindableObject view, string value)
{
view.SetValue(TextProperty, value);
}
public static TooltipPosition GetPosition(BindableObject view)
{
return (TooltipPosition)view.GetValue(PositionProperty);
}
public static void SetPosition(BindableObject view, TooltipPosition value)
{
view.SetValue(PositionProperty, value);
}
static void OnHasTooltipChanged(BindableObject bindable, object oldValue, object newValue)
{
var view = bindable as View;
if (view == null)
{
return;
}
bool hasTooltip = (bool)newValue;
if (hasTooltip)
{
view.Effects.Add(new ControlTooltipEffect());
}
else
{
var toRemove = view.Effects.FirstOrDefault(e => e is ControlTooltipEffect);
if (toRemove != null)
{
view.Effects.Remove(toRemove);
}
}
}
}
class ControlTooltipEffect : RoutingEffect
{
public ControlTooltipEffect() : base("ABCS.TooltipEffect")
{
}
}
}
I'm trying to create a tooltip inside a fragment and it spans the whole page and goes beyond. Am I missing something or it's a bug?
mToolTipsManager = new ToolTipsManager();
mTextViewRadiusLabel = (TextView) rootView.findViewById(R.id.textViewRadiusTitle);
mTextViewRadiusLabel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
ToolTip.Builder builder = new ToolTip.Builder(getContext(), mTextViewRadiusLabel, container, "Tip message asdf asasd asdfasd", ToolTip.POSITION_BELOW);
builder.setTextSize(12);
mToolTipsManager.show(builder.build());
}
});
I'm using latest SDK 25
hi
is it possible to add custom view inside the tooltip ballon instead of text?
It would be nice if we could specify the text size for the tooltips.
It must be display over other elements.
I want to use custom font in tooltip's text. any method available to apply font style?
Thank you for this great library, but there is an issue here in using ScrollView or NestedScrollView!
Tooltip keeps it location as it was shown the first time, and not moving if we scroll up or down!
¿This work inside Recyclerview?
I just copy and paste that same code from demo of tooltips, i copy code from onWindowFocus to onCreate of Activity then tooltip not shown.
// This tip is shows the first time the sample app is loaded. Use a message that gives user
// guide on how to use the sample app. Also try to showcase the ability of the app.
CharSequence initialGuideTex = Html.fromHtml("Click on the <a href='#'>Buttons</a> " +
"and the <a href='#'>Radio Buttons</a> bellow to test various tool tip configurations." +
"<br><br><font color='grey'><small>GOT IT</small></font>");
ToolTip.Builder builder = new ToolTip.Builder(this, mTextView, mRootLayout,
initialGuideTex, ToolTip.POSITION_ABOVE);
builder.setAlign(mAlign);
builder.setBackgroundColor(Color.DKGRAY);
builder.setTextAppearance(R.style.TooltipTextAppearance);
mToolTipsManager.show(builder.build());
I am showing the tooltip in a recycler view on cells . When a tooltip text is long, a tooltip is shown on a cell but a portion of it goes behind another cell in the recycler view and the arrow also goes a bit above not getting aligned with the view
Code i use:
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
holder.mTitle.text = metricObject[position].name ?: ""
holder.metricInfoIcon.setOnClickListener {
val tooltipPosition = ToolTip.POSITION_RIGHT_TO
val tooltipAlign = ToolTip.ALIGN_CENTER
var tooltipText: String = metricObject[position].definition ?: ""
displayToolTip(
tooltipText,
holder.metricInfoIcon,
holder.rootLayout,
tooltipPosition,
tooltipAlign
)
}
}
private fun displayToolTip(tootipText: String,imageView: ImageView,view: ViewGroup,position: Int, align: Int) {
handler?.removeCallbacksAndMessages(null)
toolTipsManager?.findAndDismiss(imageView)
// get message from edit text
val text: String = tootipText.trim()
// set tooltip on text view
// check condition
if (!text.isEmpty()) {
// when message is not equal to empty
// create tooltip
toolTipsManager = ToolTipsManager(this);
val builder = ToolTip.Builder(view.context, imageView,view, text, position)
//builder.setElevation(f)
// set align
builder.setAlign(align)
builder.setTextAppearance(R.style.TooltipTextAppearance)
val typeface = ResourcesCompat.getFont(context, R.font.inter_semibold)
if (typeface != null) {
builder.setTypeface(typeface)
};
// set background color
builder.setBackgroundColor(ContextCompat.getColor(context,R.color.tooltip_color))
// show tooltip
toolTipsManager!!.show(builder.build())
handler = Handler(Looper.getMainLooper());
handler?.postDelayed({
toolTipsManager?.findAndDismiss(imageView)
}, 3000)
} else {
}
}
@tomergoldst
is there any way of adding border/stroke using width and color?
Heya!
Im currently dealing with changing the text of a tooltip after creating it. With a new text its positioning above the view is incorrect.
I see you have a function for moving the tip, is it possible to make that function publich so someone can manually reposition the tooltip aligning with the view?
Thanks!
Marvin / Nop0x
can i use
scroll for large text?
@tomergoldst how to set the custom width of tooltip popup?
I tried so many ways but can't, is there any way to it?
How do I hide the tooltip on other view Click?
Greetings,
there is the method to place the text in bold
Hi,
I'm facing this issue, the tooltip view is going outside of the parent view (check screenshot attached).
I'm using RelativeLayout as parent and ImageView as target.
ToolTipsManager mToolTipsManager = new ToolTipsManager( toolTipDismiss );
ToolTip.Builder builder = new ToolTip.Builder(Detail_Page_Looks.this,
view, relSet, pojo.getPrdt_name(), tooltipPos)
.setBackgroundColor(getResources().getColor(R.color.black));
mToolTipsManager.dismissAll();
mToolTipsManager.show(builder.build());
Hi, would like to request a feature that allows the Tooltip.Builder to accept Spanned text for the message parameter. Also allowing links on the tooltip. Thank you for this useful library!
I have tested it for En and it was fine , when switching to Arabic, the tooltip disappeared or made odd box ,
Hopefully you look into this . (I am working with cardview)
Thanks
Tooltip view going outside of view. How fix this?
code:
var toolTipBuilder = ToolTip.Builder(
context, hint,
root, getString(R.string.hint), ToolTip.POSITION_ABOVE
)
toolTipBuilder.setBackgroundColor(ContextCompat.getColor(this, R.color.blue))
toolTipBuilder.setTypeface(ResourcesCompat.getFont(this, R.font.gf_bold)!!)
hint.setOnClickListener {
toolTip = toolTipsManager.show(toolTipBuilder.build())
}
xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/nested_scroll_view"
android:visibility="visible"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView/>
<androidx.core.widget.NestedScrollView>
<TextView/>
</androidx.core.widget.NestedScrollView>
<TextView/>
<ImageView
android:id="@+id/hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:src="@drawable/ic_info"
android:translationZ="15dp"
app:layout_constraintBottom_toBottomOf="@+id/label_day_select"
app:layout_constraintStart_toEndOf="@+id/label_day_select"
app:layout_constraintTop_toTopOf="@+id/label_day_select"
app:tint="@color/green" />
<com.skydoves.powerspinner.PowerSpinnerView/>
<TextView/>
<Button/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</RelativeLayout>
I want to create tooltip with exact width and height. How can i do it ?
Rationale: https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/
Quote (from a link above):
May 1st | Bintray, JCenter, GoCenter, and ChartCenter services will no longer be available
Note: it seems that Signal Android app depends on this (among many other projects).
@tomergoldst Let me know if I can help you with this.
I have a requirement to show tooltip on few buttons and in the middle of screen i have recyclerview, i created tooltip and the anchor view is buttons, but after getting results from server tooltip shown on back side of recyclerview like it is showing but recyclerview over lap it so is there any option of showing tooltip all over the other views.
I'm Facing the Wrong Tooltip position issue.
Please check this link to show Screenshot: https://github.com/tomergoldst/tooltips/assets/98881383/ca7c0a24-8743-486a-ab18-21c9521172d9)
I want to show the tooltip on the Highlighted Blend Option on Top But it shows wrong when we switch tabs.
Does anyone have a solution please help me out on this to resolve the issue.
Thank You!!
Hi i have update to 1.0.10 in that builder.setTextSize(11);
is not available hot test text size in 1.0.10
Hey,
when I use your tooltip with short text, don't know really the precise length, the tooltip is shown through the whole screen.
When I used your tooltip with longer text it is displayed correctly.
String is trimmed.
The problem with short text can be resolved by adding Padding to this string, but the final tooltip box has the width from start to the edge of screen which doesn't look quite nice.
Tooltip position bellow
Align.Left
Gravity.Left
Maybe its just me and I forget to set something to the builder.
java.lang.StringIndexOutOfBoundsException: length=0; index=0
at java.lang.String.charAt(Native Method)
at com.tomergoldst.tooltips.UiUtils.isRtl(UiUtils.java:28)
at com.tomergoldst.tooltips.UiUtils.isRtl(UiUtils.java:24)
at com.tomergoldst.tooltips.ToolTipsManager.create(ToolTipsManager.java:102)
at com.tomergoldst.tooltips.ToolTipsManager.show(ToolTipsManager.java:69)
项目中只想提示一次,第二次进入的时候不想提示了 应该怎么做?
ToolTipsManager.clear() cause Exception by dismiss() in remove the Map
If you try to delete more than one item, the problem occurs.
public void clear() {
if (!mTipsMap.isEmpty()) {
for (Map.Entry<Integer, View> entry : mTipsMap.entrySet()) {
dismiss(entry.getValue(), false); //Do not delete items from this part.
}
}
mTipsMap.clear();
}
Giving me the error Failed to resolve 'com.tomergoldst.android:tooltips:1.0.1'
I've tried nine ways from Sunday to get a tooltip to display with the underlying view for the action bar, but to no avail. Has the creator or anyone had success with this?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.