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