Reply To: Question about "jqxTooltip" of vue component

[HristoParticipant]

Hello JenkeNg,

You could try this approach below:

<template>
  <div>
    <JqxGrid
      ref="myGrid"
      :width="getWidth"
      :source="dataAdapter"
      :columns="columns"
      :columnsresize="true"
      :sortable="true"
      :showtoolbar="true"
      :rendertoolbar="createButtonsContainers"
    >
    </JqxGrid>
  </div>
</template>

<script>
import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
import JqxTooltip from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue";
import Vue from "vue";

export default {
  components: {
    JqxGrid,
    JqxButton,
    JqxTooltip,
  },
  data: function () {
    return {
      getWidth: 600,
      dataAdapter: new jqx.dataAdapter(this.source),
      columns: [
        { text: "Company Name", datafield: "CompanyName", width: 200 },
        { text: "Contact Name", datafield: "ContactName", width: 150 },
        { text: "Contact Title", datafield: "Title", width: 100 },
        { text: "Address", datafield: "Address", width: 100 },
        { text: "City", datafield: "City", width: 100 },
        { text: "Country", datafield: "Country" },
      ],
    };
  },
  beforeCreate: function () {
    this.source = {
      localdata: [
        [
          "Alfreds Futterkiste",
          "Maria Anders",
          "Sales Representative",
          "Obere Str. 57",
          "Berlin",
          "Germany",
        ],
        [
          "Ana Trujillo Emparedados y helados",
          "Ana Trujillo",
          "Owner",
          "Avda. de la Constitucin 2222",
          "Mxico D.F.",
          "Mexico",
        ],
        [
          "Antonio Moreno Taquera",
          "Antonio Moreno",
          "Owner",
          "Mataderos 2312",
          "Mxico D.F.",
          "Mexico",
        ],
        [
          "Around the Horn",
          "Thomas Hardy",
          "Sales Representative",
          "120 Hanover Sq.",
          "London",
          "UK",
        ],
        [
          "Berglunds snabbkp",
          "Christina Berglund",
          "Order Administrator",
          "Berguvsvgen 8",
          "Lule",
          "Sweden",
        ],
        [
          "Blauer See Delikatessen",
          "Hanna Moos",
          "Sales Representative",
          "Forsterstr. 57",
          "Mannheim",
          "Germany",
        ],
        [
          "Blondesddsl pre et fils",
          "Frdrique Citeaux",
          "Marketing Manager",
          "24, place Klber",
          "Strasbourg",
          "France",
        ],
        [
          "Blido Comidas preparadas",
          "Martn Sommer",
          "Owner",
          "C/ Araquil, 67",
          "Madrid",
          "Spain",
        ],
        [
          "Bon app",
          "Laurence Lebihan",
          "Owner",
          "12, rue des Bouchers",
          "Marseille",
          "France",
        ],
        [
          "Bottom-Dollar Markets",
          "Elizabeth Lincoln",
          "Accounting Manager",
          "23 Tsawassen Blvd.",
          "Tsawassen",
          "Canada",
        ],
        [
          "B's Beverages",
          "Victoria Ashworth",
          "Sales Representative",
          "Fauntleroy Circus",
          "London",
          "UK",
        ],
        [
          "Cactus Comidas para llelet",
          "Patricio Simpson",
          "Sales Agent",
          "Cerrito 333",
          "Buenos Aires",
          "Argentina",
        ],
        [
          "Centro comercial Moctezuma",
          "Francisco Chang",
          "Marketing Manager",
          "Sierras de Granada 9993",
          "Mxico D.F.",
          "Mexico",
        ],
        [
          "Chop-suey Chinese",
          "Yang Wang",
          "Owner",
          "Hauptstr. 29",
          "Bern",
          "Switzerland",
        ],
        [
          "Comrcio Mineiro",
          "Pedro Afonso",
          "Sales Associate",
          "Av. dos Lusadas, 23",
          "Sao Paulo",
          "Brazil",
        ],
        [
          "Consolidated Holdings",
          "Elizabeth Brown",
          "Sales Representative",
          "Berkeley Gardens 12 Brewery",
          "London",
          "UK",
        ],
        [
          "Drachenblut Delikatessen",
          "Sven Ottlieb",
          "Order Administrator",
          "Walserweg 21",
          "Aachen",
          "Germany",
        ],
        [
          "Du monde entier",
          "Janine Labrune",
          "Owner",
          "67, rue des Cinquante Otages",
          "Nantes",
          "France",
        ],
        [
          "Eastern Connection",
          "Ann Devon",
          "Sales Agent",
          "35 King George",
          "London",
          "UK",
        ],
        [
          "Ernst Handel",
          "Roland Mendel",
          "Sales Manager",
          "Kirchgasse 6",
          "Graz",
          "Austria",
        ],
      ],
      datafields: [
        { name: "CompanyName", type: "string", map: "0" },
        { name: "ContactName", type: "string", map: "1" },
        { name: "Title", type: "string", map: "2" },
        { name: "Address", type: "string", map: "3" },
        { name: "City", type: "string", map: "4" },
        { name: "Country", type: "string", map: "5" },
      ],
      datatype: "array",
    };
  },
  mounted: function () {
    this.createButtons();
  },
  methods: {
    createButtonsContainers: function (statusbar) {
      let buttonsContainer = document.createElement("div");
      buttonsContainer.style.cssText =
        "overflow: hidden; position: relative; margin: 5px;";
      let addButtonContainer = document.createElement("div");
      let deleteButtonContainer = document.createElement("div");
      addButtonContainer.id = "addButton";
      deleteButtonContainer.id = "deleteButton";
      addButtonContainer.style.cssText = "float: left; margin-left: 5px;";
      deleteButtonContainer.style.cssText = "float: left; margin-left: 5px;";
      buttonsContainer.appendChild(addButtonContainer);
      buttonsContainer.appendChild(deleteButtonContainer);
      statusbar[0].appendChild(buttonsContainer);
    },
    createButtons: function () {
      let addButtonOptions = {
        width: 80,
        height: 25,
        value: "Add",
        imgSrc: "https://www.jqwidgets.com/angular/images/add.png",
        imgPosition: "center",
        textPosition: "center",
        textImageRelation: "imageBeforeText",
      };
      let addButton = jqwidgets.createInstance(
        "#addButton",
        "jqxButton",
        addButtonOptions
      );
      let deleteButtonOptions = {
        width: 80,
        height: 25,
        value: "Delete",
        imgSrc: "https://www.jqwidgets.com/angular/images/close.png",
        imgPosition: "center",
        textPosition: "center",
        textImageRelation: "imageBeforeText",
      };
      let deleteButton = jqwidgets.createInstance(
        "#deleteButton",
        "jqxButton",
        deleteButtonOptions
      );

      let deleteButtonTooltipOptions = {
        content: "Tooltip for the \"Delete\" button",
        position: "bottom"
      };
      let deleteButtonTooltip = jqwidgets.createInstance(
        "#deleteButton",
        "jqxTooltip",
        deleteButtonTooltipOptions
      );
      // add new row.
      addButton.addEventHandler("click", (event) => {
        let datarow = [{}]; // generatedata(1);
        this.$refs.myGrid.addrow(null, datarow[0]);
      });
      // delete selected row.
      deleteButton.addEventHandler("click", (event) => {
        let selectedrowindex = this.$refs.myGrid.getselectedrowindex();
        let rowscount = this.$refs.myGrid.getdatainformation().rowscount;
        let id = this.$refs.myGrid.getrowid(selectedrowindex);
        this.$refs.myGrid.deleterow(id);
      });
    }
  },
};
</script>

<style>
.jqx-checkbox {
  margin-top: 10px;
}

.custom div {
  display: inline-block;
}
</style>

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com