I wan to show tooltip on clicking of a disabled button using vanila javascript (no framework, no library)

Question

<button class="product-add__button add-to-cart button button--primary set--w-100"
        data-pid="${product.id}" ${!product.readyToOrder || !product.available ? "disabled : ""}
        data-product-component="add-button"
        data-url="${pdict.addToCartUrl}"
        title="${product.productType == 'master' ? Resource.msg('button.addtocart.select.all.options', 'common', null) : ''}"
        >
    <isif condition="${product.productType === 'set' || product.productType === 'bundle'}">
        ${Resource.msg('button.addalltocart', 'common', null)}
    <iselse>
        ${Resource.msg('button.addtocart', 'common', null)}
    </isif>
</button>

This is SFCC (salesforce commerce cloud) project E-commerce site, in the cart page, if the user has not selected product size or quantity, the button will remain disabled.

Currently, We are showing default tooltip which comes from the title attribute value, but the new requirement is we need to show the same msg on click not hover, Since we cannot add a click event to the disabled element, I want to add a data-disabled attribute instead of a disabled attribute from (backend).

so based on the data-disabled attribute I need to add a disabled class (to create a dummy disabled button).

I need to add a click event listener based on the condition (user selected size or not) and show a tooltip to indicate the user to select the size or quantity.

Note: I want pure javascript solution, no frameworks no libraries, please

Below is the code my lead gave me to analyze to solve this problem but I am not getting how to implement it by using this script.

jsfidle link > https://jsfiddle.net/xhwftvkm/

    export function updateAddToCart(productData, productContainer) {
    let isDisabled = !productData.readyToOrder || !productData.available,
        testQuery = productContainer.querySelectorAll('[data-product-component="add-button"]'),
        queryString = (testQuery.length > 0) ? '[data-product-component="add-button"]' : '[data-product-component*="update-button"]';
​
    [].forEach.call(productContainer.querySelectorAll(queryString), (currentEl) => {
        if (isDisabled) {
            currentEl.setAttribute('data-disabled', '');
        } else {
            currentEl.removeAttribute('data-disabled');
            showAddToCartError(currentEl, false);
        }
    });
​
    _handleApplePay(productData, productContainer);
}
​
export function setupAddToCart(container) {
    let addToCartButtons = (container || document).querySelectorAll('[data-product-component="add-button"]:not([data-add-ready])');
​
    [].forEach.call(addToCartButtons, function(currentBtn) {
        currentBtn.setAttribute('data-add-ready', '');
​
        currentBtn.addEventListener('click', function() {
            if (this.getAttribute('data-disabled') !== null) {
                showAddToCartError(this, true);
            } else {
                handleCartAdd(this);
                showAddToCartError(this, false);
            }
        })
    });
}

Answer 1

What i understood from this question is to show a tooltip when the user clicks the button.

1.You cam design a tooltip above the button with position absolute and whatever the design yiu actually wanted. Do it first.

2.Once it completes, initially keep a display none property to tooltip div which is absolute to the button .

3.Once user clicks or hover on disabled button ,just make display visible of tooltip div using dom manipulation.If you want to disable tooltip use settimeout or any other logic .

Thanks