How to add a Rich Text Tooltip that follows the mouse?

Hello!

I am trying to implement the following jQuery script on my survey: https://www.jqueryscript.net/tooltip/rich-text-follow-mouse.html
Ideally, I would like to do this on specific choices of a multiple choice question, but to get started, I am unable to even do this on a plain text.

I will show exactly what I did and upload my .qsf file. Any help will be greatly appreciated. Unfortunately I couldn't make this work.
mouseovertext.qsf

Here's exactly what I did:

1: Added this to Header under look and feel:

2: Put this in the HTML of my text question:

3: Put this in my JS code:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{



jQuery(function(){
 jQuery("#example").jqTip({
  title: "Tooltip Title",
  content: "A super tiny jQuery tooltip plugin to display any HTML content in a hover-triggered tooltip popup which always follows the cursor on mouse move.",
  height: 'auto',
  width: 300
 });
})


});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

4: Put this in CSS:
.jq-tip-dialog{
 position: absolute;
 background-color: rgb(92, 176, 223);
 display: none;
 border-radius: 4px;
}

.jq-tip-dialog h1{
 margin: 0;
 padding: 0;
 font-size: 15px;
 color: #fff;
 padding: 5px 0 5px 5px;
}

.jq-tip-dialog .wrapper{
 padding: 0 3px 3px 3px;
}

.jq-tip-dialog .wrapper > div{
 background-color: rgb(246, 246, 246);
}

.jq-tip-dialog .wrapper > div .jq-tip-content{
 padding: 5px;
 margin: 0;
 font-size: 14px;
 overflow-y: auto;
 word-wrap: break-word;
}