Skip to main content

Adding tooltips

Adding a tooltip

To add a tooltip, you should use the tooltip parameter of the columns property:

  • set it to false to disable
  • set it to true or do not specify to show a tooltip by default
    tooltip can be a function that takes an object to be processed as an argument and returns the processed value

Example:

<script>
import { getData } from "./common/data";
import { Grid } from "wx-react-grid";
const { data } = getData();

const columnsTooltip = [
{ id: "id", width: 50, tooltip: false },
{
id: "city",
width: 100,
header: "City",
footer: "City",
},
{
id: "firstName",
header: "First Name",
footer: "First Name",
width: 150,
tooltip: false,
},
{
id: "lastName",
header: "Last Name",
footer: "Last Name",
width: 150,
tooltip: false,
},
{ id: "email", header: "Email", footer: "Email" },
{ id: "companyName", header: "Company", footer: "Company" },
{ id: "stars", tooltip: false },
{ id: "date", tooltip: (obj) => obj.date?.toDateString() },
];

let api;

</script>