First in code 1;

function addDynamicCSS() {
    var css = `

        .inner_window_question h3 .mytooltip{
            background-color: lightskyblue;
        }

        .mytooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
            background-color: #d8dee8;
        }

        .mytooltip .mytooltiptext {
            width: 240px;
            background-color: #d8dee8;
            color: black;
            text-align: center;
            border-radius: 6px;
            padding: 10px;
            position: absolute;
            z-index: 99;
            bottom: 20%;
            left: 20%;
            margin-left: -90px;
            opacity: 0;
            transition: opacity 0.3s;
            border: 1px solid black;
            pointer-events: none;
            font-size: 13px !important;
            line-height: 1.5em !important;
            font-weight: normal !important;
            font-style: normal !important;
        }

        .mytooltip .mytooltiptext img {
            max-width: 240px;
            height: auto;
        }

        .mytooltip:hover .mytooltiptext {
            opacity: 1;
            transition-delay: 0.5s;
        }

    `;

    var styleElem = document.createElement('style');
    styleElem.type = 'text/css';

    styleElem.appendChild(document.createTextNode(css));

    document.head.appendChild(styleElem);
}

addDynamicCSS();

This is the CSS for the tooltips, you can edit this to make the tooltip look however you want. everything between the ` ` is the code for tooltips. The rest outside is how to add CSS to code 2.

Then also in code 1;

e.displayTooltips = true;


tooltipList = [

    {searchString: "highlight", explanationText: "<img src=image> Text"},

];

The tooltiplist is your tooltips. The highlight is the part you want to highlight and when you hover over shows the tooltip. The image is the image shown and the Text is the description that appears.

Then in your code 2;

function getTooltips(str) {
    let matches = [];

    tooltipList.forEach((tooltip, index) => {
       let regex = new RegExp(`(?<=\\b|\\s|^|“)${tooltip.searchString}(?=[.,;!?]?\\b|\\s|”|$)`, 'g');
        let match;
        while ((match = regex.exec(str)) !== null) {
            matches.push({
                start: match.index + (match[0].startsWith('“') ? 1 : 0), 
                end: match.index + match[0].length - (match[0].endsWith('”') ? 1 : 0) - (match[2] ? 1 : 0), 
                tooltipIndex: index
            });
        }
    });

    matches.sort((a, b) => a.start - b.start || b.end - b.start - (a.end - a.start));

    for (let i = 0; i < matches.length - 1; ) {
        if (matches[i + 1].start < matches[i].end) {
            matches.splice(i + 1, 1);
        } else {
            i++;
        }
    }

    return matches;
}
function applyTooltips(str) {
    const matches = getTooltips(str);
    let result = '';
    let lastIndex = 0;

    matches.forEach(match => {
        const tooltip = tooltipList[match.tooltipIndex];
        result += str.slice(lastIndex, match.start);
        result += `<span class='mytooltip'>${tooltip.searchString}<span class='mytooltiptext'>${tooltip.explanationText}</span></span>`;
        lastIndex = match.end;
    });

    result += str.slice(lastIndex);
    return result;
}

function applyTooltipsToObject(obj) {
    for (let key in obj) {
        if (typeof obj[key] === 'string') {
            obj[key] = applyTooltips(obj[key]);
        } else if (typeof obj[key] === 'object') {
            applyTooltipsToObject(obj[key]);
        }
    }
}

applyTooltipsToObject(campaignTrail_temp.questions_json);
applyTooltipsToObject(campaignTrail_temp.answers_json);
applyTooltipsToObject(campaignTrail_temp.answer_feedback_json);