Skip to content

nericode/nativescript-tooltip

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tooltip {NS} apple android

Installation

Ideally it would be something like:

tns plugin add nativescript-tooltip-ns

Screenshot

Android

Usage

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", // Optional
  },
  android: {
    position: "bottom",
    style: "ToolTipLayoutCustomStyle",
    fitToScreen: true,
  },
});

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>

API

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;
    fitToScreen?: boolean;
  };
}

export declare type ToolTipPosition =
  | "left"
  | "up"
  | "right"
  | "down"
  | "top"
  | "bottom";
export declare type ToolTipViewType = "native";

License

Apache License Version 2.0, January 2004