JqueryUI Tooltip with SharePoint Framework Field Customizer

Two weeks ago I wrote a blog post about new SharePoint Framework Extensions – Application Customizers. Another part of new SharePoint Framework Extensions are Field Customizers. They are for client-side Field customizing in SharePoint Lists & Libraries Views.

For my SPFx Field Customizer example I’m going to show you scenario with additional text from some other field on mouse-over event inside specific field.

Lets start. Create new SPFx Extension named spfx-fieldcustomizer with Yeoman generator. Choose Extension (Preview) as the client-side component type and Field Customizer (Preview) as the extension type to be created.

In additional install JQuery v1.12.4 and JQueryUI v1.11.1 for JqueryUI Tooltip with commands below:

npm install --save jquery@1.12.4
npm install --save jqueryui@1.11.1

Then install SP-PnP-JS which we will use it for reading additional field from specific list item.

npm install --save sp-pnp-js

Open project with Visual Studio Code. Then firstly add specific import statements at the top of the HelloWorldFieldCustomizer.ts file:

import * as jQuery from 'jquery';
import 'jqueryui';

import { Log } from '@microsoft/sp-core-library';
import { override } from '@microsoft/decorators';
import {
} from '@microsoft/sp-listview-extensibility';

import * as strings from 'helloWorldStrings';
import styles from './HelloWorld.module.scss';

import pnp, { List, ItemUpdateResult, Item } from 'sp-pnp-js';
import { SPComponentLoader } from '@microsoft/sp-loader';

Clean export interface because we don’t need any additional properties:

export interface IHelloWorldProperties {

Load Jquery-UI CSS inside onInit() method:

public onInit(): Promise<void> {

    return Promise.resolve<void>();

We need to update onRenderCell() method. There we read additional description from AdditionalDescription field which is hidden from view. Because of that we need to get content of field via sp-pnp-js from specific list item (ID as reference). In the end we need to call JqueryUI Tooltip.

public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
            .then(r => {
              event.cellDiv.innerHTML = '&lt;div class="spfx-tooltip"&gt;&lt;a href="#" title="' + r.AdditionalDescription + '"&gt;' + CellFormatter.renderAsText(this.context.column, event.cellValue) + '&lt;/a&gt;&lt;/div&gt;';         

              jQuery(function() {

This is all of code for this example. Serve project with command below:

gulp serve --nobrowser

Then go to your O365 developer tenant site. Create list named Tasks with three fields:

  • Title: single line
  • Description: single line
  • AdditionalDescription: multiple lines (hidden from view)

Add new test task and append this query string to your list view URL (replace with your extension ID from manifest.json file):


As you can see, now we have JQueryUI Tooltip on Description field (defined in query string).


[ Complete code on GitHub ]

Gašper Rupnik



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: