Fluent UI Tooltip inside the PnP ListView in SPFx

This article demonstrates how to implement a Fluent UI Tooltip inside the PnP ListView in a SharePoint Framework (SPFx) web part.
The Fluent UI Tooltip provides contextual hover information for any list item or column value, creating a polished user experience.

⚙️ Install Required Libraries

Install PnP SPFx Controls and Fluent UI React:

npm install @pnp/spfx-controls-react --save --save-exact
npm install @pnp/spfx-property-controls --save --save-exact
npm install office-ui-fabric-react --save

Create a new component file (e.g., SpfxFluentuiTooltip.tsx) under the components folder.

import * as React from 'react';
import styles from './SpfxFluentuiTooltip.module.scss';
import { ISpfxFluentuiTooltipProps } from './ISpfxFluentuiTooltipProps';
import { ListView, IViewField } from '@pnp/spfx-controls-react/lib/ListView';
import { TooltipHost, ITooltipHostStyles } from 'office-ui-fabric-react/lib/Tooltip';
import { sp } from '@pnp/sp';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

export interface ISpfxFluentuiTooltipState {
  items: any[];
  viewFields: IViewField[];
}

export default class SpfxFluentuiTooltip extends React.Component<ISpfxFluentuiTooltipProps, ISpfxFluentuiTooltipState> {
  constructor(props: ISpfxFluentuiTooltipProps) {
    super(props);
    sp.setup({ spfxContext: this.props.context });
    this.state = { items: [], viewFields: [] };
  }

  public async componentDidMount(): Promise<void> {
    await this.getListItems();
  }

  private async getListItems() {
    const items: any[] = await sp.web.lists.getByTitle("Projects").items.get();
    const viewFields: IViewField[] = [
      {
        name: "Title",
        displayName: "Project Title",
        render: (item: any) => (
          <TooltipHost content={item.Title} calloutProps={{ gapSpace: 0 }}>
            <span>{item.Title}</span>
          </TooltipHost>
        )
      },
      {
        name: "Manager",
        displayName: "Project Manager",
        render: (item: any) => (
          <TooltipHost content={`Manager: ${item.Manager}`}>
            <span>{item.Manager}</span>
          </TooltipHost>
        )
      }
    ];
    this.setState({ items, viewFields });
  }

  public render(): React.ReactElement<ISpfxFluentuiTooltipProps> {
    return (
      <div className={styles.spfxFluentuiTooltip}>
        <ListView
          items={this.state.items}
          viewFields={this.state.viewFields}
          compact={true}
          selectionMode={0}
        />
      </div>
    );
  }
}

🧠 Key Points

TooltipHost is imported from office-ui-fabric-react/lib/Tooltip
The content prop defines what appears on hover
The PnP ListView handles data rendering, while Fluent UI enhances the UX

🚀 Build and Deploy

Use the following commands to bundle and deploy your web part:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the generated .sppkg file (found under sharepoint/solution) to your App Catalog, and add the web part to your SharePoint page.

📂 GitHub Sample Project

View full SPFx project on GitHub:Fluent UI Tooltip inside the PnP ListView in SPFx

GitHub

✅ Summary

The Fluent UI Tooltip integrated with the PnP ListView provides a lightweight, accessible way to show additional context on hover.
It’s ideal for large SharePoint lists where descriptive data enhances usability without cluttering the UI.

Fluent UI Tooltip inside the PnP ListView in SPFx

⚙️ Install Required Libraries

🧩 Implement the Tooltip in ListView

🧠 Key Points

🚀 Build and Deploy

📂 GitHub Sample Project

✅ Summary

Author

Tags