JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <label class="tooltip">
            This is what it should look like (hover over me).
            <div class="right">Text</div>
        </label>
        <form>
            <section id="section-a">
                <!-- Gets populated by the script -->
            </section>
        </form>
    </div>
    
</body>
</html>

CSS

/* http://www.menucool.com/tooltip/css-tooltip */
.tooltip {
    display: inline-block;
    position: relative;
    border-bottom: 1px dotted #666;
    text-align: left;
}

.tooltip .right {
    min-width: 200px;
    top: 50%;
    left: 100%;
    margin-left: 20px;
    transform: translate(0, -50%);
    padding: 10px 20px;
    color: #FFFFFF;
    background-color: #000000;
    font-weight: normal;
    font-size: 13px;
    border-radius: 8px;
    position: absolute;
    z-index: 99999999;
    box-sizing: border-box;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    display: none;
}

.tooltip:hover .right {
    display: block;
}

.tooltip .right i {
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -12px;
    width: 12px;
    height: 24px;
    overflow: hidden;
}

.tooltip .right i::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 0;
    top: 50%;
    transform: translate(50%, -50%) rotate(-45deg);
    background-color: #000000;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.price {
    float: right;
}

JavaScript

class BaseProduct {
    constructor(name, helpText = null) {
        this.name = name;
        this.helpText = helpText;
    }

    label() {
        if (this.helpText) {
            return `
                <label class="tooltip">
                    ${this.name}
                    <div class="right">${this.helpText}</div>
                </label>`;
        }
        return `<label for="not-important">${this.name}</label>`;
    }
}

class Product extends BaseProduct {
    constructor(name, price, helpText = null) {
        super(name, helpText);
        this.price = price;
    }

    toHtml() {
        let inner = `
            <input type="checkbox" name="not-important"
                id="not-important" value="not-important" />
            ${super.label()}
            <span class="price">${this.price}</span>`;
        return `
            <p class="item-row">
                ${inner}
            </p>`;
    }
}

/** Insert an element into a container element */
const insert = (elementHtml, containerElemId) => {
    const container = document.getElementById(containerElemId);
    container.insertAdjacentHTML('beforeend', elementHtml);
}

const sections = [
    {
        'name': 'section-a',
        'products': [
            new Product(
                'Product Name',
                123,
                helpText = '[Product help text]'
            ),
        ]
    }
]

const populateSection = (section) => {
    for (const product of section['products']) {
        insert(product.toHtml(), section['name'])
    }
}

const populateForm = () => {
    for (const section of sections) {
        populateSection(section);
    }
}

window.addEventListener('DOMContentLoaded', (event) => {
    populateForm();
});