Help with the tooltip!

Photoshop
1

Welcome all my friends.
I’m having a rather small problem in
the tooltip I will share with you my Full profile and please look at it.
html:

<!--clean  + liquify-->
        <div class="btn-set marg-t-24">
            <button id="clean" onClick='runScript("CLEAN");' class="btn btn-56x27 marg-l-17 tooltip"></button>
        </div>
<!-------------------- Description ---------------------------->
<!--IMAGE FOR clean Description-->
<p class="imgDescription1" id="cleandesc" style="left: 17px; bottom: 240px; text-align: center;">1 STAGE (It includes cleaning / CLEAN and plastic / LIQUIFY, you can do one of these, all together or skip, these steps are not required as in previous versions, the RETOUCHPRO algorithm is now independent and can be launched immediately after opening the photo ) specifically on this button - CLEANING WITH THE HEALING BRUSH (after clicking, a copy of the layer will be created and the healing brush is automatically turned on, with it you can clean contrasting spots on the skin, loose hairs, dust on the matrix, dirty background, etc. / after it will be available. It is advisable to start cleaning as the very first stage of work, then go to plastic / Liquify. Keep in mind that when you go to the creation of the RETOUCHPRO algorithm, you will not be able to return to the cleaning stage. / LIQUIFY ، RETOUCHPRO )</p>

css:

.tooltip sp-tooltip {
    display: none;
    position: absolute;
    top: -35px;
    font-size: 10px;

}

.tooltip:hover sp-tooltip {
    display: block;
    color: #fff;
    background-color: #232323;
}
.imgDescription {
    display: none;
    position: absolute;
    color: #fff;
    background-color: #232323;
    padding: 3px;
    font-size: 10px;
    font-weight: normal;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
        "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color: #c5c5c5;
    opacity: 0;
    width: 61px;

}

.imgDescription1 {
    display: none;
    position: absolute;
    color: #fff;
    background-color: #af8c70;
    padding: 3px;
    font-size: 10px;
    font-weight: normal;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
        "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color: #000000;
    opacity: 0;
    width: 200px;

}



.showTooltip {
    display: block;
    visibility: visible;
    opacity: 1;
}

button:hover .imgDescription {
    visibility: visible;
    opacity: 1;
}

Js Code:

// 👇 **setupToolTip CODE** 👇 // 👇 MY WORKE MOHAMAD FATHI 👇 2023****
let setupToolTip = function() {
    let tooltip = "",
        tooltipDiv = document.querySelector(".btn1desc"),
        tooltipElements = Array.from(document.querySelectorAll(".imgDescription"));

    let displayTooltip = function(e, obj) {
        tooltip = obj.p.tooltip;
    };

    tooltipElements.forEach(function(elem) {
        elem.addEventListener("mouseover", function(e) {
            displayTooltip(e, this);
        })
    })
}
setupToolTip();

This is my Full profile but I’m having trouble responding the code is not working please look at it and try to help me , I will be grateful to all of you my friends :pray:

With regards …
Mohamed Fathi… :wine_glass:

2

The css option opacity is not working correctly in UXP. Try to avoid it. Maybe this is the issue.

3

Hi Tomzag.
Can you look at the trigger code and give me your opinion, I doubt that the code is the one that has an error!!

With regards …
Mohamed Fathi… :wine_glass:

4

But you already have got an opinion. Did you try the proposed solution?