[Vuejs]-Nativescript vue tooltip use

by

0👍

✅

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>

Leave a comment