In this blog I will explain how to create a SPFx webpart using the Bootstrap & Jquery plugin tooltipster https://iamceege.github.io/tooltipster/. The tooltipster is one of the popular jquery plugin used to show formatted tooltip when a mouse hover or click event occur. The plugin is easy to use and can use html formatting for the title attribute of the html element. My sample application uses the latest fontawesome 5 to show the smilies. The finished application will look like below. The webpart will have 3 smilies which are fontawesome 5 icons, clicking on the icon will popup the tooltipster window. The tooltipster will have html format to get the comment and submit button. The submit button will save the comment, current user email to the list in SharePoint. PNPjs is used to add item to the list.

Full source code is in the Github https://github.com/msisgreat/spfx/tree/master/msisgreat

Libraries Used

1. Bootstrap v4.3.1
2. jQuery v3.4.1
3. Font Awesome 5.10.1
4. Tooltipster v4.2.6
5. Pnpjs v1.3.5

Below is the screenshot of my dependencies from the package.json file

Step: 1

After creating the basic webpart using the reactjs option. Follow the steps from my previous blog to add the reference to bootstrap and fontawesome 5. You can read from here

Step : 2

Use below commands to install other dependencies

npm install jquery --save
npm install tooltipster --save
npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp @pnp/graph --save

In this sample I didn’t use any Microsoft Graph code, I just used the above command to install all the pnp module just in case. You can install what will work for you.

Once the libraries are installed add the below json entry to the config.json file under the “externals”:

"jquery": {
"path": "node_modules/jquery/dist/jquery.min.js",
"globalName": "jquery"
},

"bootstrap": {
"path": "node_modules/bootstrap/dist/js/bootstrap.min.js",
"globalName": "bootstrap"
},

"tooltipster": {
"path": "node_modules/tooltipster/dist/js/tooltipster.bundle.min.js",
"globalName": "tooltipster"
}

The full config.json will look like this

Step: 3

Now open the SharePoint and create the List name “Feedbacks” in the site. The List will have 3 columns. Alternatively you can download the list template from here

Step: 4

In the sample used here the webpart name is msisgreat. So you can see the file msisgreat.tsx under components folder. Open the full code using the Visual Studio Code and navigate to the components folder to see all the files.

Now create a file called Feedback.tsx under components, this is the React component which will display 3 smilies with the jsx elements. You can copy the code from the file here

Basically the code contains the reference to jquery and tooltipster and the code to load the component.

Step: 5

Go back to main webpart file in this case msisgreat.tsx, open the file and reference to the feedback component

Import Feedback from "./Feedback"

In the JSX add the <Feedback></Feedback>

Step: 6

I have used some of the custom styles in the sample. You can see those in the .scss file. Those are used as styles.<name> inside the Feedback.tsx

Once the code is done use the gulp serve to test it

Follow this article to package and deploy to the Developer site to test the original code to save to list

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page

Node.js: v10.16.0
SPFx: 1.9.1

Bootstrap & Font Awesome are my mandatory libraries to build any site on SharePoint Online. I used it often to customise the look of SharePoint using the content editor webpart with js & css. When I tried to migrate my code to SPFx one of the challenge I faced was how to install those in the solution. Well we have several choices to add those in the framework
Before adding libraries please go through this Link from Microsoft Docs to understand how those external dependencies are loaded and handled within SPFx
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library
Global Reference Approach:
In the below code I used the global option to load those libraries so that multiple webparts can make use of the libraries.

Step :1

After finished creating the WebPart solution using Yo generator install the bootstrap and font awesome using the below

npm install jquery --save
npm install @types/jquery --save-dev
npm install bootstrap@4 --save
npm install @types/bootstrap@4 --save-dev
npm install --save @fortawesome/fontawesome-free

Step:2

Add external references to the config.json file
Locate the config.json file under the config folder and add the below entry to the file

"externals": {
"jquery": {
"path": "node_modules/jquery/dist/jquery.min.js",
"globalName": "jQuery"
},
"bootstrap": {
"path": "node_modules/bootstrap/dist/js/bootstrap.min.js",
"globalName": "bootstrap"
}
}

Step 3:

Font awesome is not recognised by default by the webpack, so the gulp has to recognise the font format before it loads it to the solution. Run the below command to install the url loader

npm install url-loader --save-dev

After installing add the below to the gulp.js file which is at the root folder

'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration.module.rules.push(
{
test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: {
loader: 'url-loader'
}
}
);
return generatedConfiguration;
}
});
build.initialize(gulp);

Step 4:

Now add the entry into the .tsx file to reference the bootstrap CSS & JS and the font awesome CSS

import * as jQuery from "jquery";
import * as bootstrap from "bootstrap";
require('../../../../node_modules/bootstrap/dist/css/bootstrap.min.css');
require('../../../../node_modules/@fontawesome/fontawesome-free/css/all.min.css');