mui中的DataGridPro中的baseTooltip插槽怎么使用，请用代码说明

在使用mui中的DataGridPro组件时，可以通过baseTooltip插槽自定义提示信息的样式和内容。下面是一个示例代码：

<template>
  <div>
    <DataGridPro :rows="rows">
      <template #baseTooltip="{ row }">
        <div class="custom-tooltip">
          <p>Name: {{ row.name }}</p>
          <p>Email: {{ row.email }}</p>
          <p>Phone: {{ row.phone }}</p>
        </div>
      </template>
    </DataGridPro>
  </div>
</template>

<script>
import { DataGridPro } from 'mui';

export default {
  components: {
    DataGridPro,
  },
  data() {
    return {
      rows: [
        { id: 1, name: 'John Doe', email: 'john.doe@example.com', phone: '555-1234' },
        { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', phone: '555-5678' },
        { id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com', phone: '555-9012' },
      ],
    };
  },
};
</script>

<style scoped>
.custom-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

在上面的代码中，我们在DataGridPro组件中定义了一个baseTooltip插槽，用于自定义每一行的提示信息。在插槽中，我们使用了一个自定义的样式.custom-tooltip，并且展示了每一行的name、email、phone三个字段的信息。

需要注意的是，在DataGridPro组件中，通过baseTooltip插槽传递的参数是row，表示当前行的数据。我们可以使用row来展示每一行的具体信息。