Hide tooltip on click on mobile devices

Question

I have the following HTML:

<div class="gb-headline gb-headline-3f4a2ae2 gb-headline-text disc-tooltip" id="togl">Advertiser Disclosure
<div class="arrow"></div>
<p class="disc-tooltiptext">Disclosure text goes here. Read our <a target="_blank" href="/#" rel="noopener">disclosure</a></p>
</div>

I am using some CSS to position and show a tooltip while hovering over the Disclosure text:

/* Disclosure tooltip */
.disc-tooltip {
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
}

.disc-tooltip a {
    color: #575760;
}

.disc-tooltip:hover {
    cursor: pointer;
}

.disc-tooltip .disc-tooltiptext {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s;
    text-align: left;
    font-size: 14px;
    max-width: 500px;
    width: 86vw;
    box-shadow: 0 0 18px rgb(0 0 0 / 18%);
    background-color: #FFF;
    color: #303030;
    padding: 20px 30px;
    margin-bottom: 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 40px;
  right: 0;
}

.disc-tooltip {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.disc-tooltip .disc-tooltiptext a {
    color: #303030;
    text-decoration: underline;
}

.disc-tooltip .disc-tooltiptext a:hover {
    color: #7e7e7e;
}

.disc-tooltip:hover .disc-tooltiptext {
    visibility: visible;
    opacity: 1;
}


.disc-tooltip .arrow {
    position: relative;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s;
    display: block;
    top: 10px;
    margin-left: 60px;
    width: 14px;
    height: 14px;
    background-color: #FFF;
    transform: rotate(45deg);
    box-shadow: -10px -10px 18px rgb(0 0 0 / 8%);
    z-index: 2;
}

.disc-tooltip:hover .arrow {
    visibility: visible;
    opacity: 1;
}


@media(max-width: 768px) {
    .disc-tooltip .arrow {
        top: 15px;
    }
}

On mobile devices, the tooltip opens on click and closes when clicking outside of it but I am looking for way for those devices to also be able to close the tooltip when clicking on the Advertiser Disclosure text.

Couldn't make it work. Here is an example page. Advertiser disclosure can be found at the top right of the content.

Update: I tried the example from @Ibrahim Sharaf, it doesn't work for me, maybe I am doing something wrong:

function _isMobile() {
var ___isMobileDevice;
const isMobileDeviceCheck = () => {
    if(screen.width < 500 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
        ___isMobileDevice = true;
    }
    if (___isMobileDevice) {
        if (typeof window.orientation === "undefined") {
            ___isMobileDevice = false; 
        }
    }
    if (typeof navigator.userAgentData != "undefined" && !navigator.userAgentData.mobile) {
        ___isMobileDevice = false; 
    }
    if ( typeof window.orientation !== "undefined" && ___isMobileDevice ) {
        if ( localStorage.mobile || window.navigator.maxTouchPoints > 1 || 'ontouchstart' in document) {
            if ( window.navigator.maxTouchPoints > 1 ) {
                // mobile device found
                console.log('Is mobile device? '+navigator.userAgentData.mobile); 
                alert('mobile')
                ___isMobileDevice = ''; 
            }
        }
    }
}
window.onresize = () => {
    isMobileDeviceCheck();
}
isMobileDeviceCheck();
}
 
if (_isMobile()) {
 
    //toggle element
    const advertiser = document.getElementById('toggle');
    const target = document.querySelector(".disc-tooltiptext");
    let visible = false;
    
    advertiser.addEventListener("click", function() {
        if(visible) {
            target.style.visibility = 'hidden';
            visible = false;
        } else {
            target.style.visibility = 'visible';
            visible = true;
        }
    })
}

This worked for me, though:

if (window.innerWidth < 768) {
    const advertiser = document.getElementById('toggle');
    const target = document.querySelector(".disc-tooltiptext");
    const arrow = document.querySelector(".disc-tooltip .arrow");
    let visible = false;
    
    advertiser.addEventListener("click", function() {
        if(visible) {
            target.style.visibility = 'hidden';
            arrow.style.visibility = 'hidden';
            visible = false;
        } else {
            target.style.visibility = 'visible';
            arrow.style.visibility = 'visible';
            visible = true;
        }
    })
}

Answer 1

You need to check if the user is using a mobile device, and then run your js code See this:

Detecting a mobile browser

for exmaple you can do something like this:

function _isMobiel() {
//logic to check if a user using a mobile device
}

if (_isMobile()) {

    //toggle element
    const advertiser = document.getElementById('toggle');
    const target = document.querySelector(".disc-tooltiptext");
    let visible = false;
    
    advertiser.addEventListener("click", function() {
        if(visible) {
            target.style.visibility = 'hidden';
            visible = false;
        } else {
            target.style.visibility = 'visible';
            visible = true;
        }
    })
}