Nativescript vue tooltip use

Question

I'm using nativescript vue

I want to run this tooltip.

code like in tutorial is not working:

 <Button text="Get Json Data" id="tool" ref="tooltip" @tap="getData" class="btn btn-primary m-t-20"></Button>

I made button like this and in created trying to make it working but

 created() {
     let tipref = this.$refs.tooltip;
     let tippref = this.$refs.page.tooltip;
     //new ToolTip(this.nativeView.topmost().tip,{text:"Text"});
     //const tip = new ToolTip(this.nativeView.tipref,{text:"Some Text"});
     new ToolTip(tipref,{text:"Some Text"});   
},

still not working: TypeError: Cannot read property 'tooltip' of undefined TypeError: Cannot read property 'nativeView' of undefined

Can't figure out how to do it.

The code from the answer How to create a floating help layout? is not working too.

The error is probably here: let tippref = this.$refs.page.tooltip;. this.$refs.page doesn't seem to exist. Can you try removing that line? — Tiago A.
yes but class of tooltip looks like this export declare class ToolTip { private builder; private tip; constructor(view: any, config: ToolTipConfig); show(): void; hide(): void; static getResource(type: any, name: any): any; } and in the conctructor ineed to pass view, and do not know what to pass here that what are these let tippref variables trying to achieve pass view — KarolekMasterek
so what? this.$refs.page doesn't exist so the function crashes in that line. You are not using the var tippref anyways. Remove that line, please. — Tiago A.
also, try changing from created to mounted. created may execute before the template is ready. — Tiago A.
like this? mounted(){ var tipref = this.$refs.tooltip; //new ToolTip(this.nativeView.tipref,{text:"Some Text"}); // not working //new ToolTip(tipref,{text:"Some Text"}); // not working }, — KarolekMasterek

Manoj Manoj · Accepted Answer · 2019-04-15T20:50:01

In order to access the NativeScript View via ref, you should do this.$refs.tooltip.nativeView. Also wait for the loaded event of the element to make sure it's ready to use.

<template>
  <Page class="page">
    <ActionBar title="Home" class="action-bar"/>
    <ScrollView>
      <StackLayout class="home-panel">
        <Button
          text="Get Json Data"
          ref="tooltip"
          class="btn btn-primary m-t-20"
          @loaded="onLoaded"
        ></Button>
      </StackLayout>
    </ScrollView>
  </Page>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    onLoaded: function(args) {
      const ToolTip = require("nativescript-tooltip").ToolTip;
      const tip = new ToolTip(args.object, {
        text: "Some Text",
        backgroundColor: "pink",
        textColor: "black"
      });
      tip.show();
    }
  }
};
</script>

Nativescript vue tooltip use

1 Answers