Ideally it would be something like:
tns plugin add nativescript-tooltip-ns
import { TooltipNs } from "nativescript-tooltip-ns";
var tooltip = new TooltipNs();
var button = this.page.getViewById("label");
tooltip.show({
message: "Hello! this is my tooltip...",
view: button,
ios: {
hasInterval: false,
shadow: true,
cornerRadius: 0,
margin: [0, 0, 0, 0],
padding: [0, 0, 0, 0],
color: "yellow",
textColor: "black",
},
android: {
position: "bottom",
style: "ToolTipLayoutCustomStyle",
},
});
setTimeout(() => {
tooltip.dismiss();
}, 1500);In .html:
<GridLayout>
<!-- Ref id button -->
<button
id="button"
text="Clickme"
backgroundColor="black"
color="white"
(tap)="onShow()"
height="40"
></button>
</GridLayout>Custom Style(Only Android)
In App_Resources/Android/src/main/res/values/styles
<style name="ToolTipLayoutCustomStyle">
<item name="ttlm_padding">25dip</item>
<item name="ttlm_backgroundColor">#000000</item>
<item name="android:textAppearance">@style/TextAppearanceCustom</item>
</style>
<style name="TextAppearanceCustom" parent="TextAppearance.AppCompat.Inverse">
<item name="android:textColor">@android:color/white</item>
</style>export interface Options {
message: string;
view: any;
ios?: {
hasInterval?: boolean;
interval?: number;
shadow?: boolean;
cornerRadius?: number;
padding: Array<any>;
margin: Array<any>;
color: string;
textColor: string;
};
android?: {
position?: ToolTipPosition;
viewType?: ToolTipViewType;
duration?: number;
fadeDuration?: number;
width?: number;
delay?: number;
hideArrow?: boolean;
style?: string;
};
}
export declare type ToolTipPosition =
| "left"
| "up"
| "right"
| "down"
| "top"
| "bottom";
export declare type ToolTipViewType = "native";Apache License Version 2.0, January 2004